GSAP

GSAP, the GreenSock Animation Platform, is a JavaScript library for animating web content with high performance and consistent behavior across browsers. It animates CSS properties, SVG, canvas, and any JavaScript object property, covering everything from small interface touches to full WebGL scene choreography. Following the Webflow acquisition, version 3.15 is 100% free for all uses, including every formerly premium plugin such as SplitText and MorphSVG. GSAP remains the standard behind award-winning interactive sites for one reason: precision you can rely on.

A tween is one movement: an element sliding up, fading in, or changing color over a set duration with an easing curve that shapes how it travels. A timeline is the choreography, sequencing tweens relative to each other so an entire entrance can be built, retimed, paused, or reversed as a single object. This composition is what keeps complex animation maintainable; changing the pacing of a whole sequence means adjusting one value, not recalculating a dozen delays.

import gsap from 'gsap'

const tl = gsap.timeline({ defaults: { ease: 'power3.out' } })

tl.from('.hero-title', { y: 60, opacity: 0, duration: 1.2 })
  .from('.hero-subtitle', { y: 40, opacity: 0, duration: 0.8 }, '-=0.6')
  .from('.hero-cta', { opacity: 0, duration: 0.6 }, '-=0.4')

ScrollTrigger links animation to how far a visitor has scrolled, which turns a static page into something that responds to the reader. It can play, pause, scrub, or pin elements based on when they enter and leave the viewport, with start and end positions defined precisely. Scrubbing ties animation progress directly to scroll distance so motion tracks the visitor exactly, while pinning holds an element in place as content scrolls past. This plugin is the basis for the reveal and pinning effects across the Devyst design language.

Animation and React both want to control the page, so the integration has to be deliberate. GSAP animations are created inside an effect after the DOM exists, and the useGSAP hook wraps that lifecycle, handling setup and cleanup automatically. Element references come from useRef with a scoped context so selectors match only inside the component at hand. Cleanup matters: animations and ScrollTrigger instances must be reverted on unmount, or they leak memory and leave stale triggers behind. We keep this logic in reusable hooks under a dedicated animations directory.

We use GSAP for every scroll reveal, sequenced hero entrance, and SplitText effect across our work. Animation logic lives in reusable hooks rather than inside section components, so the same reveal behaves identically everywhere and is maintained in one place. Defaults follow the Devyst motion language: power3.out easing for entrances, power2.inOut for transitions, reveals near 0.8 seconds and hero sequences near 1.2. Every ScrollTrigger instance is killed on unmount, without exception.

Some visitors get physically uncomfortable from on-screen motion, and their operating systems say so through the prefers-reduced-motion setting. We honor it everywhere: animations are registered through gsap.matchMedia, which applies them conditionally and swaps in instant state changes when a visitor has asked for reduced motion. On unmount, animations and their ScrollTrigger instances are reverted to release everything they hold. No Devyst animation ships without a reduced-motion fallback, because polish that excludes people is not polish.