This website showcases the powerful capabilities of GSAP (GreenSock Animation Platform). It highlights modern web design trends with stunning animations, including a dynamic bottle that moves based on user scroll, alongside other engaging animations.
- HTML: Structuring the web content.
- CSS: Styling the elements to create an appealing design.
- JavaScript: Adding interactivity to the website.
- GSAP: Powering the animations and scroll-based effects.
This project was a collaboration where:
- My friend designed the concept.
- I brought it to life by coding it using the tech stack mentioned above.
Building this project was a challenging yet rewarding experience. Here's what I learned:
- Timelines and CSS Styling:
- I discovered how GSAP timelines are influenced by CSS properties such as
z-index.
- I discovered how GSAP timelines are influenced by CSS properties such as
- ScrollTrigger Properties:
- The
startandendproperties of ScrollTrigger were initially hard to grasp, but with practice, I understood their behavior and usage in creating scroll-based animations.
- The
-
Clone the Repository:
git clone https://github.com/your-username/gsap-showcase.git
-
Navigate to the Project Directory:
cd gsap-showcase -
Install Live Server Extension:
- If you’re using Visual Studio Code, install the Live Server extension.
-
Run the Project:
- Right-click on the
index.htmlfile and select "Open with Live Server". - The website will open in your default browser, and you can explore the animations!
- Right-click on the
bottles-website.mp4
⭐ Note: Don't forget to give this repository a star if you like the project!