Shots in this scene

← scene 13 · SVG Animation → scene 15 · Motion for React ▦ the storyboard

SHOT 14.1Advanced ~21 min · shot 1 of 7

GSAP Tweens

In one line

A tween is one animation from a start to an end. GSAP's to, from, fromTo and set cover every case, take durations in seconds, and can animate any number on any object, not only CSS.

0/7 · 0%

Think of it like this

A stage manager with a clipboard. A cue says "at this moment, move the sofa from here to there, over four seconds". The manager does not care whether it is a sofa, a light or a number on a display. GSAP is that manager: you hand it a target, the end values and a duration, and it moves them frame by frame.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

tween: One animation of one or more values from a start to an end over some time. The word comes from "in between".
target: What a tween changes: a selector, an element, a list, or a plain JavaScript object.
ease: The speed curve of a tween. GSAP names them like power2.inOut or back.out(1.7); "none" is a straight line.
immediateRender: Whether a tween writes its start values right away. It is on for from() and fromTo(), off for to().

Step by step

01Press Play and read the three tracks

Open "Four verbs" below and press Play. Three GSAP tracks appear, one per dot, plus one for the price. Each lasts 1000 ms (1500 ms for the price). The console already says set wrote: 0px.

02Pause at half time and compare the dots

Press Reset, pause, press Play, then step to about 500 ms. The top dot is at 151 px, not 100: its default ease power1.out has covered 75% of the way by half time. The blue dot (from) is at 49 px and moving the other way, ending where CSS put it. The black dot (fromTo, power2.inOut) is at 102 px: that ease is symmetric, so half time is half way.

03Find the price counting

The price is a number inside a plain object, { price: 0 }. GSAP changes the number every frame and calls onUpdate, which writes it into the page. The track's target reads (object): GSAP only moves a number.

04See what `from()` does during a delay

In "Traps" the top dot has from(… x: 200, delay: 2). At load it jumps to 200 and sits there for two seconds, then slides home. The middle dot is a fromTo with immediateRender: false: it waits at 0, then jumps to 200 when its two seconds are up and slides back. Both are correct; they are different choices.

Try it yourself

1
Make the duration a thousand times too long
In "Four verbs" change the top tween to duration: 1000, press Play, pause and step. The track is 1,000,000 ms long, and after three seconds the dot has moved only about 1 px (x = 1.2). Nothing is broken: you asked for sixteen minutes. Go back to 1.
2
Give the black dot an overshoot
Change power2.inOut to back.out(1.7). At 600 ms the dot is at 159.9 px, past its end value of 150, and it settles back to 150. Names with brackets take a number that sets how strong the effect is.

Code & diagrams

Four verbs

to, from, fromTo and a tween of a plain object. Press Play, then pause and step through it. The tracks say GSAP; they show how long each lasts and its ease.

Press Run to see the page.

00:00.000

animations

0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s

Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.

frames

Console

Nothing logged yet.

Expected console output

set wrote: 0px

Traps: from, a missing target, and seconds

Read the console, then watch the first two dots for two seconds. The third tween was written as `duration: 600`: look at its track, 600000 ms, and at the dot, which does not seem to move.

Press Run to see the page.

00:00.000

animations

0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s

Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.

frames

Console

Nothing logged yet.

Expected console output

same moment:   a x = 0  b x = 0
two frames on: a x = 200  b x = 0
GSAP target .nope not found. https://gsap.com
tweens made for .nope: 0
duration 600 means 600 seconds

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Tween something that does not exist

In "Traps" the line gsap.to(".nope", { x: 100 }) has a selector that matches nothing.

terminal

$ Read the console

── what you'll see ──

GSAP target .nope not found. https://gsap.com (a console warning)

tweens made for .nope: 0

Myth vs fact

Myth

GSAP is faster than CSS.

Fact

GSAP writes transform and opacity on the main thread every frame; a CSS transform animation can run on the compositor. GSAP wins on control, not raw speed (Phase 6).

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
from() and fromTo() queue their first render for the next tick (lazy, on by default), so many tweens read the page first and write after, which avoids layout thrashing. After gsap.from(), gsap.getProperty() still returns the old value until the next frame (measured: 0, then 200 a frame later). lazy: false renders at once.
▸
GSAP writes its shorthands (x, y, scale, rotation) into one transform, and autoAlpha into opacity plus visibility. A plain gsap.to of x shows a composite (green) track. Tweens made with from() or inside a timeline are green too: only the properties you animate count. A tween on width, left or boxShadow really costs layout or paint, as in CSS (Topic 6.2).

Remember this

1
The problem this solves: CSS animates styles one rule at a time, and the Web Animations API is verbose when ten things must move in order. You also cannot animate a plain number (a price counting up) or tell CSS "start this when that one is half done". GSAP is a small, tested set of verbs for all of that, and it behaves the same in every browser.
2
The licence, in plain words. GSAP is free for everyone, including commercial sites, under Webflow's "Standard No Charge" licence. It is not open source: the one restriction is on tools that compete with Webflow, such as no-code animation builders.
3
Four verbs. gsap.to(target, vars) animates from the current value to the end value. gsap.from(target, vars) animates from the given values to the current ones. gsap.fromTo(target, fromVars, toVars) writes both ends down. gsap.set(target, vars) writes values at once, like a tween of 0 seconds. The target is a CSS selector, an element, a list of elements, or any JavaScript object.
4
Durations are seconds, not milliseconds. duration: 1 is one second and duration: 600 is ten minutes. CSS and the Web Animations API use milliseconds, which bites people who come from them. The default is 0.5 seconds with "power1.out".
5
GSAP's own properties. x, y, scale, rotation and xPercent are GSAP's shorthands: it keeps the numbers itself and writes one transform for you, so x and scale never fight each other. autoAlpha fades opacity and also sets visibility: hidden at zero, so a hidden element cannot be tabbed to or clicked.
6
**from() renders at once.** A tween made with from() writes its start values straight away (immediateRender), even while a delay counts. That avoids a flash of the finished state, but the element sits at its start position during the delay. The write happens on GSAP's next tick, so reading the value in the same line still shows the old one.
7
What GSAP adds, and what it does not. Any number on any object, sequencing without delay arithmetic (Topic 14.2), and plugins for scroll, layout and text. It does not make anything cheaper: left still costs layout.

Explain it without notes

What is the difference between gsap.to, gsap.from and gsap.fromTo?

Why can a from() tween with a delay look like a bug, and how do you change it?

Practice

Write a tween that moves #box right by 300 px in 0.4 seconds with a gentle overshoot at the end, and says in a comment which unit the duration is in.

Make #price count from 0 to 2490 in 1.5 seconds, written as euros with a thousands separator, using a plain object.

Done when you can

You can use to, from, fromTo and set, and say which end each one writes
You write durations in seconds and read the track to check
You can say what immediateRender does and when to switch it off