https://github.com/rumaisanaveed/bottles-website
A website to showcase the capabilities of GSAP. It highlights the latest trends in web design, featuring moving objects. The site demonstrates a bottle that changes its position based on the user's scroll. It also includes additional animations.
https://github.com/rumaisanaveed/bottles-website
css3 gsap gsap-scroll gsap-scrolltrigger gsap-timeline html5 javascript trending-website-design
Last synced: 2 months ago
JSON representation
A website to showcase the capabilities of GSAP. It highlights the latest trends in web design, featuring moving objects. The site demonstrates a bottle that changes its position based on the user's scroll. It also includes additional animations.
- Host: GitHub
- URL: https://github.com/rumaisanaveed/bottles-website
- Owner: rumaisanaveed
- Created: 2024-01-14T12:10:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-29T15:28:22.000Z (over 1 year ago)
- Last Synced: 2025-07-22T05:44:59.360Z (11 months ago)
- Topics: css3, gsap, gsap-scroll, gsap-scrolltrigger, gsap-timeline, html5, javascript, trending-website-design
- Language: HTML
- Homepage:
- Size: 496 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🍾 Bottle Showcasing Website
## 📝 Introduction
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.
---
## 🛠️ Tech Stack
- **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.
---
## 🛤️ The Process
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.
---
## 🎓 What Did I Learn?
Building this project was a challenging yet rewarding experience. Here's what I learned:
1. **Timelines and CSS Styling**:
- I discovered how GSAP timelines are influenced by CSS properties such as `z-index`.
2. **ScrollTrigger Properties**:
- The `start` and `end` properties of ScrollTrigger were initially hard to grasp, but with practice, I understood their behavior and usage in creating scroll-based animations.
---
## 🚀 Running the Project
1. **Clone the Repository**:
```bash
git clone https://github.com/your-username/gsap-showcase.git
```
2. **Navigate to the Project Directory**:
```bash
cd gsap-showcase
```
3. **Install Live Server Extension**:
- If you’re using Visual Studio Code, install the **Live Server** extension.
4. **Run the Project**:
- Right-click on the `index.html` file and select **"Open with Live Server"**.
- The website will open in your default browser, and you can explore the animations!
---
## 🎥 Demo Video
https://github.com/user-attachments/assets/f62fed5e-6b5d-4462-8520-ff97c1a0e004
---
⭐ **Note**: Don't forget to give this repository a star if you like the project!