A cinematic, animation-driven recreation of the Grand Theft Auto VI landing page.

Live Demo · Report Bug

This project is a high-fidelity recreation of the GTA VI promotional landing page, built as a deep-dive exercise in advanced web animation. It demonstrates mastery of GSAP ScrollTrigger, scroll-based video scrubbing, pin-scroll sequences, parallax layering, and responsive motion design — all without a single CSS keyframe animation.

The experience is built with React, TypeScript, and Tailwind CSS, and showcases what's possible at the intersection of frontend engineering and motion design.

• 🎬 Scroll-Driven Video Playback — Video progress is tied directly to the user's scroll position via GSAP ScrollTrigger
• 📌 Pinned Scroll Sequences — Sections lock into place while animations play out before releasing the user
• 🌊 Parallax Layering — Multi-depth parallax effects on hero assets create cinematic depth
• 📱 Responsive Breakpoints — Mobile-first layout with react-responsive for targeted breakpoint logic
• ⚡ GSAP-Powered Motion — All animations run at 60fps via GSAP's optimized rendering pipeline
• 🎨 Cinematic UI — Dark, immersive aesthetic matching the GTA VI brand identity

• Node.js v18+
• npm

git clone https://github.com/brandonperfetti/gta-vi-landing.git
cd gta-vi-landing
npm install

npm run dev

Open http://localhost:5173 in your browser.

npm run build
npm run preview

npm run lint

gta-vi-landing/
├── src/
│   ├── components/       # Page sections and animation components
│   ├── constants/        # Animation config, asset paths
│   └── main.tsx          # App entry point
├── public/               # Static media assets (video, images)
├── constants/            # Shared constants
└── index.html

This project was built as part of a web animations course focused on production-grade GSAP techniques. Key takeaways:

• ScrollTrigger pinning for creating multi-phase scroll sequences
• Video scrubbing — mapping currentTime to scroll progress for smooth playback
• GSAP timeline composition for orchestrating complex multi-element sequences
• Performance optimization — reducing repaints with will-change and transform-only animations

Deployable to Vercel or Netlify with zero configuration.

MIT © Brandon Perfetti