GSAP Animation
We build web animations with GSAP that perform well in production, not just in demos. That means understanding how the browser renders, where GPU compositing helps, and when a beautiful animation is creating a performance problem that outweighs its value.
Capabilities
What we build with GSAP
ScrollTrigger
Scroll-Driven Animations
Scroll-linked animations using ScrollTrigger — elements that animate as they enter the viewport, sections that pin while a sequence plays, and parallax effects that track scroll position. We configure scrub, pin, and trigger settings to match the design intent precisely.
Enter / exit sequences
Page and Route Transitions
Animated page transitions and route changes in React and Next.js applications. We coordinate exit animations, route changes, and entrance animations so transitions feel intentional rather than abrupt.
Draw · Morph · Path
SVG Animation
Animated SVGs for illustrations, icons, data visualizations, and decorative elements. Draw-on effects, path morphing with MorphSVG, and coordinated multi-element SVG sequences.
SplitText · Headlines
Text Animation
Headline and body text animations using SplitText: line reveals, word staggers, character-by-character sequences. We configure these to look polished and to degrade gracefully when JavaScript is not available.
Branded motion
Marketing and Landing Pages
Animation-heavy marketing pages where the motion is part of the product story. We design the animation sequence first as a timeline, then implement and optimize so the performance budget is respected on mobile as well as desktop.
useGSAP · Context
React and Next.js Integration
GSAP integrated correctly into React and Next.js using the useGSAP hook and GSAP context for cleanup. Animations that do not cause memory leaks, do not conflict with React's render cycle, and work correctly in strict mode.
Our approach
Performance first, motion second
A 60fps animation on a MacBook Pro that drops to 20fps on a mid-range Android phone is not a finished animation. We test on lower-end hardware and use GPU-composited properties — transform and opacity — as the primary animation targets. We use will-change deliberately and remove it when the animation is complete.
Timelines, not scattered tweens
An animation built from scattered individual tweens is hard to adjust and hard to maintain. We build complex sequences as GSAP timelines with labeled sections so timing adjustments ripple through the sequence correctly and the animation is understandable to whoever works on it next.
Cleanup in React
GSAP animations in React require explicit cleanup. ScrollTriggers that are not killed when a component unmounts cause memory leaks and duplicate triggers on re-mount. We use the useGSAP hook and GSAP context to ensure cleanup happens correctly in every case.
Respect reduced-motion preferences
The prefers-reduced-motion media query exists so that users who experience vestibular issues or motion sensitivity can request reduced animation. We check this preference and either disable or simplify animations accordingly, because an animation that makes a user sick is not an asset.
All engineering work is done by US-based engineers. We do not offshore any development or architecture work.
Part of our software engineering services. We work across the full stack, cloud platforms, and architectural patterns.
FAQ
Common questions
Virginia · United States
Need GSAP animation expertise?
If you have a motion design concept to implement or an existing animation that needs to perform better, reach out and we will discuss the scope before any work begins.