GTA VI Landing Page 🚨
A recreation of the scroll effect from Rockstar Games' official website.
Astro ★ — — commits updated — —
GTA VI Landing Page recreates the scroll effect from Rockstar Games' official site. I wanted to understand how such a cinematic entrance can be built with masks, scale, and animations synchronized to scrolling.
The main challenge was turning the logo into a window that reveals the content by combining GSAP, ScrollTrigger, CSS masks, and clip-path. It was a useful exercise in building more ambitious motion while retaining control over the sequence.
## Stack & decisions
- Astro — I used it to structure the landing page and keep the complexity concentrated in the animations.
- GSAP and ScrollTrigger — They control the zoom, transitions, and pace of the experience according to scroll progress.
- CSS Masks and clip-path — They power the central effect: revealing content through the logo and creating cinematic transitions.
## What I built
- I built a GTA VI logo mask with mask-image, mask-position, and mask-size animated through GSAP.
- I used clip-path transitions for a curtain-like reveal that strengthens the interactive-trailer feeling.
- I learned to combine advanced CSS with timelines so a complex animation remained easy to tune.
## Keep exploring
🎥
A web app that configures OBS Studio around the user's hardware.
React
Tailwind
Node
🥩
A more visual and direct website redesign for an Argentinian restaurant.
Astro
Tailwind
Threejs