🍊 Fanta Animated Landing Page

An interactive, scroll-triggered product landing page for Fanta built with HTML, CSS, JavaScript, and GSAP ScrollTrigger.

---

📖 Overview

This project is a vibrant, modern promotional landing page featuring dynamic, scroll-driven animations. Using GSAP and its ScrollTrigger plugin, visual assets—including the main soda can, fresh orange slices, and floating leaves—fluidly translate, rotate, and resize across viewport sections as the user scrolls.

---

✨ Features

• Scroll-Linked Animations: Smooth timelines tied directly to user scroll position with scrub enabled.
• Dynamic Visual Transitions: Soda cans, fruit slices, and leaves seamlessly travel across distinct content sections.
• Multi-Brand Showcase: Interactive product comparison cards for Coca-Cola, Fanta, and Pepsi.
• Responsive Layout: Clean CSS flex/grid architecture styled to match brand aesthetics.

---

🛠️ Tech Stack

• HTML5: Semantic document structure.
• CSS3: Custom styling, cubic-bezier transitions, and responsive layout.
• JavaScript (ES6+): Animation logic and DOM manipulation.

---

📁 File Structure

├── Assets/          # Images, logos, fruit cutouts, and can renders
├── Fonts/           # Custom typography
├── index.html       # Webpage structure
├── style.css        # Layouts, positioning, and transitions
└── script.js        # GSAP timelines and ScrollTrigger configuration

🚀 Getting Started

1. Clone the Repository

    git clone https://github.com/ajayxuns/fanta-website.git
    cd fanta-website

2. Launch

Open index.html directly in any web browser.
Or run it using the Live Server extension in VS Code.

3. 👤 Author

GitHub: @ajayxuns

4. 📜 License

This project is open-source and available under the MIT License.