The GreenSock Animation Platform — a fast, framework-agnostic JavaScript engine that tweens any number, any property, on a precise timeline. Everything below is animated by the real GSAP.
A tween animates from one state to another. gsap.to() animates to a value, from() animates in from one, and fromTo() defines both ends.
gsap.to("#box", { x: 300, rotation: 360, duration: 1, ease: "power2.out" });
Easing shapes the personality of motion. Each lane plays the same distance with a different GSAP ease. Hit replay to compare them side by side.
A gsap.timeline() chains tweens so they play in order (or overlap). Watch three boxes move as one coordinated sequence.
const tl = gsap.timeline(); tl.to("#a", { x: 300 }) .to("#b", { x: 300 }, "-=0.4") .to("#c", { x: 300 }, "-=0.4");
One tween, many targets. GSAP's stagger offsets each element's start time, rippling animation through a grid from its center.
The real ScrollTrigger plugin ties animations to scroll position. Scroll this inner panel — each card fades and slides in as it enters view.
This card was hidden until its position crossed the trigger.
GSAP watches the scroller and fires the tween at the right moment.
ScrollTrigger is a first-party GSAP plugin.
Scroll back up and they animate out again.
By animating strokeDashoffset, GSAP can "draw" an SVG path stroke from nothing — the classic signature/line-draw effect.
cdn.jsdelivr.net/npm/gsap@3.13.0. Every tween, timeline, stagger, scroll-bound reveal and SVG stroke-draw above is genuine GreenSock — only the page chrome comes from the shared CSS shell.