Case Study

GTA VI

Scroll-Driven Cinematic Website

Role
Frontend + Motion, Solo
Status
Live
Stack
React · GSAP · Lenis
— Interactive Case Study
12 editorial spreads documenting the design, build, and lessons.

A flip-through companion to this page — shot and laid out like a game magazine.

Vaishali Aggarwal portfolio case study magazine cover
01
Overview

The goal wasn't to clone Rockstar's site pixel-for-pixel. It was to understand how motion, pacing, video, and scroll behavior combine into a cinematic browsing experience — and rebuild that feeling with frontend tools alone.

The result is a single-page, video-heavy site where scroll position — not clicks — drives the story forward.

02
Highlights
Scroll-timeline motion

Pinned, scrubbed GSAP sequences instead of one-off animations.

Scroll-synced video

HTML5 video playback tied to scroll position, not autoplay.

Cross-device tuning

Timing and pinning re-balanced for tablet and mobile.

Production performance

Optimized media and fonts for a smooth Netlify build.

03
Technical Snapshot

Five layers, each with one job — kept separate so animation logic never leaked into presentation.

00InterfaceReact · Vite
01Motion systemGSAP · ScrollTrigger
02Scroll engineLenis
03Media layerVideo · Responsive images
04PlatformNetlify
04
Challenges
Video without the lag
Video-heavy pages break easily on mobile. Media had to be optimized without losing the cinematic feel.
Motion with intent
Every pin and scrub had to support the story, not just show off — GSAP timelines gave the precise sequencing CSS alone couldn't.
Smooth, not sluggish
Lenis was layered in for smoother scroll physics, tuned to stay responsive alongside ScrollTrigger.
05
Outcome

Shipped a cinematic, scroll-driven site that stays responsive across devices — and a working case study in treating motion as narrative pacing, not decoration.

Shipped & live on NetlifyPinned + scrubbed GSAP timelinesTuned across desktop, tablet, mobile
Continue Exploring
More Projects

If you enjoyed this build, here are a few others.

— LET'S TALK

Building something that needs motion done right?