AirPods Pro 2 Hero Animation Clone

📋 Description

Learning-focused project that recreates Apple AirPods Pro 2 hero animation, with emphasis on advanced GSAP animation workflows and scroll-based synchronization.

🔗 Live demo: https://airpods-animation-eight.vercel.app/

⚖️ Disclaimer: Non-commercial project. All images, visual assets, and trademarks belong to Apple Inc. and are used only for educational and practice purposes.

🛠️ Technologies

• Astro
• GSAP + ScrollTrigger
• Canvas API
• HTML5 and CSS3

✨ Features

• Canvas image-sequence animation synchronized with scroll.
• Dynamic header that hides on scroll.
• SubNav with blur and background transition based on scroll position.
• Intro animations on initial page load.
• Responsive layout with visual fidelity to the original reference.
• Preloading of 65 frames for smoother performance.

🗂️ Project Structure

/
├── public/
│   └── images/             # 65-frame image sequence
├── src/
│   ├── components/
│   │   ├── Header.astro    # Main navigation and SubNav
│   │   ├── Hero.astro      # Main hero with Canvas
│   │   └── SubNav.astro    # Secondary navigation
│   └── pages/
│       └── index.astro     # Main entry page
└── package.json

📦 Setup and Development

git clone https://github.com/Fr4n0m/airpods-animation.git
cd airpods-animation
npm install
npm run dev

The app will be available at http://localhost:4321.

📜 Available Scripts

Command	Description
npm run dev	Starts the development server
npm run build	Builds production version into dist/
npm run preview	Serves the production build locally

🎯 Project Goal

Built for learning purposes, with a focus on:

• GSAP Timelines and multi-animation orchestration.
• ScrollTrigger with scrub for scroll-linked interaction.
• Canvas-based image sequence rendering.
• Image preloading strategies to avoid flicker.
• Animation optimization to maintain smooth playback.

🤝 Contributing

1. Fork the repository.
2. Create a descriptive branch (feature/change-name).
3. Keep the existing project style and verify everything works.
4. Open the PR with a clear summary of what changed and why.

📄 License

Source code is released under MIT. Visual assets and trademarks belong to their respective owners.