GSAP and CSS, animating without limits
CSS handles simple animations with elegance. GSAP takes over when the sequence grows complex, when timing truly matters, when the animation needs to respond to scroll or interaction.
Animating on the web means navigating between two worlds. On one side, CSS: fast to write, performant, native, perfectly suited to state transitions and short animations. On the other, JavaScript — and more specifically GSAP (GreenSock Animation Platform): precise, powerful, capable of orchestrating complex sequences that CSS simply cannot handle alone.
True mastery of web animation means knowing when to use one, when to use the other, and how to make them work together.
What CSS does very well
CSS transitions are unbeatable for simple state changes: hover, focus, element appearance, colour change. The browser optimises these animations by offloading them to the GPU when possible. Smooth, performant, dependency-free.
With @keyframes, you can go further: looping animations, bounce effects, sequences on a single element. animation-delay lets you stagger multiple elements, animation-fill-mode controls the final state. For many use cases, CSS is more than enough.
Where GSAP becomes indispensable
GSAP comes into play when a sequence involves multiple elements with precise timing, when the animation needs to react to an event (scroll, click, viewport entry), or when programmatic control is needed (pause, reverse, seek to a position).
GSAP's strength rests on two things: its timeline engine, which lets you orchestrate animations in time with absolute precision, and its plugin ecosystem. ScrollTrigger in particular has become the standard for scroll-driven animations: pinning, scrubbing, viewport triggering.
GSAP does not replace CSS. It takes over where CSS stops — and together the two cover the full range of web animation needs.
Emmanuel Lechat
The combination in practice
In a typical project, CSS handles micro-interactions (hovers, active states, navigation transitions) and GSAP takes care of page entrance animations, scroll effects, hero section animation sequences, and page transitions.
A concrete example: the image animation in the portfolio gallery on this site. CSS handles the hover zoom with transform: scale() and transition. GSAP with ScrollTrigger handles the progressive appearance of images on scroll, with an offset calculated according to position in the grid.
This division of responsibilities keeps the code readable and maintainable. CSS animations stay in CSS files. Complex orchestrations stay in JavaScript files. Each tool does what it does best.
Performance and accessibility
Two points often overlooked in web animations. Performance first: always favour transform and opacity for animations — the only properties that do not trigger layout recalculation. GSAP applies this rule by default; CSS leaves that responsibility to the developer.
Accessibility next: respect prefers-reduced-motion. Some users are sensitive to animation. A single line of CSS or a JavaScript condition is enough to disable non-essential effects for those users. It is a matter of respect as much as good practice.