A GSAP tutorial: tweens, eases and stagger

CSS takes you a long way: transitions for state changes, keyframes for loops and simple entrances. It gets awkward once motion needs to be controlled from JavaScript, chained into a long sequence, reversed halfway or tied to scroll. That is where GSAP comes in. This GSAP tutorial covers what the library is, when it is worth loading, how to add it to a page, and the four methods you will use most: gsap.to(), gsap.from(), gsap.fromTo() and gsap.set(). Then we look at GSAP's eases and its stagger option, and you rebuild your hero heading's reveal with it.

01What GSAP is, and when to reach for it

GSAP, the GreenSock Animation Platform, is a JavaScript library that changes values over time. Most often those values are CSS properties on elements, but it can animate SVG attributes, CSS custom properties or plain numbers in an object just as well. It is now a Webflow product, which matters for its licence, covered below.

Each animation GSAP runs is called a tween, short for in-between: you give it a target, the values to reach and how long to take, and it works out every frame in between. Under the hood it updates inline styles once per frame from JavaScript.

Reach for GSAP when you need one of these:

• Sequences. Many tweens that overlap and depend on each other. Chaining them with CSS delays falls apart quickly, as CSS keyframes showed. GSAP timelines, the subject of the next chapter, solve it.
• Control. Pause, reverse, speed up or jump to any point of an animation from your code, for example when a menu closes before it finished opening.
• Scroll. Animation that starts or scrubs with scroll position, through the ScrollTrigger plugin in chapter 9.
• Values CSS cannot animate well. Numbers counting up, SVG paths, or anything computed in a script.

Stay with CSS for hover and focus states, simple entrances and small loops. They need no library, they reverse naturally, and they work before any script has loaded. A site can happily use both: CSS for the interface, GSAP for the sequences.

02Loading GSAP

GSAP's installation page offers three routes: npm, Yarn, or a script tag from a CDN (a content delivery network, which serves the file from servers close to the visitor). On 14 October 2026 its install helper gave this script tag:

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>

gsap@3.15 asks jsDelivr for the newest 3.15 release. You can pin the exact version instead, gsap@3.15.0 at the time of writing, so the file never changes under you. Load it before your own script, and your script can use the global gsap object.

If your project uses a bundler such as Vite, install it from npm and import it:

// npm install gsap
import { gsap } from 'gsap';

The same page notes that the private npm registry members once used is no longer maintained, because GSAP and all of its plugins are now on the public npm registry.

Is GSAP free?

Yes, for nearly every use, but it is not open source. GSAP ships under its own Standard "No Charge" GSAP License, which Webflow publishes. Read on 14 October 2026, it says:

• You may use GSAP products on any website, web application or digital interface, including commercial ones, at no charge.
• That covers the plugins too. The licence's FAQ says plugins that used to be for paying members only, such as SplitText and MorphSVG, can now be used in commercial projects for free.
• The one prohibited use is putting GSAP in a tool that lets people build visual animations without code, where that tool competes with Webflow's own visual animation builder.

The licence's effective date is 30 April 2025. For a client website, a landing page or a web app, you are free to use it. If you are building a no code animation tool, read the licence in full and ask GSAP first.

03Four methods: to, from, fromTo and set

Every tween takes a target and a vars object. The target is a CSS selector, an element or a list of elements. The vars object holds the properties to animate and special properties such as duration, delay and ease.

gsap.to('.box', { x: 200, rotation: 90, duration: 1 });   // from now to these values
gsap.from('.box', { y: 40, duration: 0.6 });               // from these values to now
gsap.fromTo('.box', { scale: 0.8 }, { scale: 1 });         // both ends given
gsap.set('.box', { x: 0 });                                // jump there, no animation

• gsap.to() animates from the element's current values to the ones you give. Use it for anything that moves away from where it is.
• gsap.from() animates from the values you give to the element's current ones. This suits entrances, because the element's CSS stays the truth and the tween only says where it comes from, like leaving out to in a keyframe.
• gsap.fromTo() sets both ends, so the result does not depend on the element's state when it starts. Use it when a tween may run more than once.
• gsap.set() applies values immediately. The getting started guide describes it as a zero duration to().

x, y, rotation and scale are GSAP's transform shorthands: x: 200 means translateX(200px) and rotation: 90 means rotate(90deg). GSAP combines them into one transform for you, so a tween on x and another on rotation do not overwrite each other the way two CSS animations on transform would. The same guide gives the defaults: a tween with no duration lasts 0.5 seconds.

Try the three animating methods in the playground below. Pick to, from or fromTo, set x, rotation, scale, duration and an ease, then press Play. Below the controls it prints the exact line of GSAP code that produced the movement, so you can copy it.

04Eases in GSAP

The eases documentation says the default ease is power1.out, the gentle ease out that suits most entrances. Each ease is a family name and a direction:

The rules from easing and timing still apply: .out for things arriving, .in for things leaving, .inOut for things moving from one place on screen to another. back and elastic have character, which means they draw attention. Use them for one playful moment, not for every button.

05The stagger option

Give a tween several targets and add stagger, and each target starts a little after the one before. GSAP's staggers guide explains that stagger: 0.1 puts 0.1 seconds between each start:

gsap.from('.card', { y: 30, duration: 0.5, stagger: 0.08 });

gsap.from('.card', {
  y: 30,
  stagger: { each: 0.08, from: 'center' },
});

The object form gives you more control. each is the gap between starts, amount is a total time shared out across all the targets instead, and from sets where the wave begins: 'start', 'end', 'center', 'edges', 'random' or an index. These map directly to the ideas in stagger and sequence. Use amount when the number of items can change, such as cards from a CMS, so the total reveal time stays the same however many there are.

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>

gsap.from('.hero-title .word', {
  y: '0.6em',
  duration: 0.6,
  ease: 'power3.out',
  stagger: 0.06,
});