Use this skill when building web animations with GSAP — tweens, timelines, ScrollTrigger scroll-driven effects, stagger sequences, and easing curves.
A tween is a single animation applied to one or more targets.
| Method | Behaviour |
|---|---|
gsap.to(target, vars) | Animate from current values to the specified values. |
gsap.from(target, vars) | Animate from the specified values to current values. |
gsap.fromTo(target, fromVars, toVars) |
| Explicitly define both start and end values. |
gsap.set(target, vars) | Immediately set properties (zero-duration tween). |
A timeline is a sequencing container for tweens.
const tl = gsap.timeline({ defaults: { duration: 0.6, ease: "power2.out" } });
tl.from(".hero-title", { y: 40, opacity: 0 })
.from(".hero-subtitle", { y: 30, opacity: 0 }, "-=0.3") // overlap by 0.3s
.from(".hero-cta", { scale: 0.8, opacity: 0 }, "-=0.2");
Position parameters control overlap:
| Parameter | Meaning |
|---|---|
"-=0.3" | Start 0.3 s before previous tween ends (overlap). |
"+=0.5" | Start 0.5 s after previous tween ends (gap). |
"<" | Start at same time as previous tween. |
2 | Absolute time of 2 s on the timeline. |
GSAP ships a rich library of eases.
| Ease | Use Case |
|---|---|
"power2.out" | Natural deceleration — good default for entrances. |
"power2.in" | Acceleration — exits flying off-screen. |
"power2.inOut" | Symmetric — state-change morphs. |
"back.out(1.7)" | Slight overshoot — playful UI elements. |
"elastic.out(1, 0.3)" | Spring-like bounce — attention-grabbers. |
"none" / "linear" | Constant speed — progress bars, looping rotations. |
Register the plugin before use:
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
Core properties:
| Property | Description |
|---|---|
trigger | The element whose position activates the animation. |
start | e.g. "top 80%" — when trigger's top hits 80 % of viewport. |
end | e.g. "bottom 20%" — when trigger's bottom hits 20 % of viewport. |
scrub | true or number (smoothing) — ties progress to scroll position. |
pin | true — pins the trigger element while the animation plays. |
toggleActions | Four states: onEnter onLeave onEnterBack onLeaveBack. |
Animate a set of elements with sequential delays:
gsap.from(".card", {
y: 60,
opacity: 0,
duration: 0.5,
stagger: 0.12, // 120 ms between each card
ease: "power2.out",
});
Advanced stagger object: