There’s a version of web animation that nobody likes, the kind that hijacks your scroll, throws text at you from six directions at once, and makes you wait three seconds before you can read a single word. And then there’s the other kind: the kind you barely notice, but that makes everything feel right. That second kind is what we’re talking about here.
GSAP, the GreenSock Animation Platform, is the tool of choice for professional web animation, used on over 12 million sites worldwide and now completely free following Webflow’s acquisition in 2025. But the tool is only half the story. Used with restraint and intention, GSAP can make a website feel genuinely alive. Used without those things, it can make it feel like a theme park. Here’s our take on getting it right.
What is GSAP, and why does it matter?
GSAP has been the professional standard for complex web animation since Flash died. Originally built in 2008 by Jack Doyle, it’s now used on over 12 million production sites worldwide and is the engine behind countless award-winning web experiences. Apple, Google, Disney, and EA all use it. And as of April 2025, the entire GSAP library is completely free including premium plugins like ScrollTrigger, SplitText, and MorphSVG that previously required a paid subscription.
Why subtle animation is almost always the right call
There’s a temptation, especially with a tool as powerful as GSAP, to go all-in. Full-screen intros, elements flying in from every direction, scroll-jacking that takes control away from the user. We’ve all seen sites like that. They’re usually on design award shortlists and absolutely nowhere near a conversion.
Subtle animation does something much more valuable: it guides attention, provides feedback, and adds a sense of polish without ever getting in the way. A heading that fades and lifts slightly on scroll. A button that responds gently when hovered. A card that eases in as it enters the viewport. None of these are showstoppers but together they make a site feel alive, considered, and trustworthy. That feeling translates directly into user confidence, and user confidence translates into enquiries.
What GSAP gives you over plain CSS
CSS transitions handle basic UI animation perfectly well. Where GSAP earns its place is in anything that requires sequencing, choreography, or scroll-driven behaviour. GSAP’s timeline system lets you chain and overlap animations with millisecond precision, staggering elements entering the page, synchronising multiple components, or tying an entire sequence to scroll position via ScrollTrigger. That level of control simply isn’t available in plain CSS.
ScrollTrigger: animation that responds to the user
ScrollTrigger connects animations directly to scroll position, allowing elements to animate as they enter the viewport, or driving a full narrative sequence as the user moves down the page. Used with restraint, it’s one of the most effective tools for keeping users engaged. The key is always to serve the content, not distract from it.
Performance: does it add weight?
GSAP’s core comes in at around 22KB minified and gzipped, smaller than a single compressed hero image. With proper integration, the impact on Core Web Vitals is negligible. Animate transforms and opacity rather than layout properties and you’re golden, GSAP is built around GPU-friendly properties by default.
