GTA VI Landing Page
Recreación del efecto scroll del sitio oficial de Rockstar Games.
GTA VI Landing Page es una recreación del efecto de scroll del sitio oficial de Rockstar Games. Me interesaba entender cómo se logra una entrada tan cinematográfica usando máscaras, escala y animaciones sincronizadas con el desplazamiento.
El mayor reto fue hacer que el logo funcionara como una ventana que revela el contenido, combinando GSAP, ScrollTrigger, CSS masks y clip-path. Fue un ejercicio muy útil para practicar animaciones más ambiciosas sin perder control sobre la secuencia.
Tecnologías y decisiones
-
Astro: Lo usé como base para estructurar la landing y concentrar la complejidad en las animaciones.
-
GSAP y ScrollTrigger: Me permitieron controlar el zoom, las transiciones y el ritmo de la experiencia según el avance del scroll.
-
CSS Masks y clip-path: Fueron la parte central del efecto: revelar contenido a través del logo y crear transiciones con sensación cinematográfica.
Qué construí
- Construí una máscara con el logo de GTA VI usando mask-image, mask-position y mask-size animados con GSAP.
- Trabajé transiciones con clip-path para crear un revelado tipo cortina y reforzar la sensación de trailer interactivo.
- Aprendí a combinar CSS avanzado con timelines para que una animación compleja fuera más fácil de ajustar.