The Problem
The client had detailed Figma designs with complex scroll-triggered animations and a hard deadline. Previous attempts with CSS-only animations hadn't achieved the smoothness the designs called for - the brief specifically asked for GSAP.
What I Built
Implemented the full design in React with GSAP handling all scroll-triggered sequences. Built the animation layer separately from the component layer so it could be tuned without touching layout code. Delivered on time, pixel-perfect, with no revisions requested.
Broke the Figma file into animation zones before writing any code. Mapped which elements were scroll-triggered, which were entrance animations, and which were hover states - then planned the GSAP timeline structure around that.
Built all GSAP logic in a separate hook per section rather than inline in components. This meant animation timing could be tuned without touching layout code - important when a client asks for tweaks after seeing it in the browser.
Optimised image assets manually, used lazy loading for below-the-fold content, and profiled the GSAP timeline for jank on a mid-range Android device. The final build had strong Core Web Vitals without any framework-level optimisation.
What Happened
Delivered on deadline with pixel-perfect fidelity - no revision cycles
All GSAP animations running at consistent 60fps on mid-range devices
Client approved on first review and reused the codebase as a template
In the Wild