Track G

GSAP, under the hood

How the animation library actually works: what a tween is, the single ticker, how it animates anything, timelines as data, its eases and matrix transforms, and ScrollTrigger.

1. What a tween really is: the interpolation core

   Strip GSAP of its plugins, its ticker, and its timelines and what's left at the very bottom is a single small idea — an object that remembers a start value, an end value, and how far along it is, and on every tick writes start plus delta times an eased progress back onto its target. This lesson builds that core from scratch so the rest of the library stops looking like magic.

   12 min
2. The ticker: one rAF loop to rule them all

   A tween has a tick(dt) method and nothing calling it, and the obvious fix — give every tween its own requestAnimationFrame loop — is exactly the wrong instinct; this lesson builds GSAP's actual answer, a single global ticker that drives every active animation from one delta-time clock, and unpacks why centralizing that clock is the point rather than an implementation detail.

   12 min
3. How GSAP animates anything: the property model and plugins

   The interpolation core writes a plain number straight onto target[prop], which is exactly right for a JavaScript object and says nothing at all about a DOM node, an SVG shape, or a color, so this lesson unpacks the getter/setter architecture and the plugin layer that let GSAP treat every one of those as just a bag of numbers to read from and write to.

   13 min
4. Timelines: sequencing as a data structure

   A GSAP Timeline isn't a scheduler that fires tweens on a stopwatch — it's a container holding child tweens at fixed positions on its own local time axis, with its own playhead, so sequencing an entire choreographed animation becomes one small, testable idea rather than a pile of hand-computed delays.

   13 min
5. Eases in GSAP: the shape of time, extended

   An ease in GSAP is nothing more exotic than a plain JavaScript function dropped into one line of the interpolation core, and because it's a real function rather than four fixed numbers, GSAP can express overshoot, oscillation, and hand-authored curves that a CSS cubic-bezier structurally cannot.

   12 min
6. Transforms and the matrix: how GSAP handles x, y, rotation, and scale

   CSS transform is a single property holding an ordered list of operations, which makes animating translation and rotation independently a genuine headache in raw CSS — you have to restate the whole list every time and the order changes the result — and GSAP's fix is to treat x, y, rotation, and scale as separate animatable numbers that it composes into one matrix every tick, reading the current matrix back apart when it needs to know where a transform currently stands.

   13 min
7. ScrollTrigger under the hood

   ScrollTrigger is the ticker's whole idea run on a different clock — instead of elapsed time driving an animation's playhead, scroll position does, converted into a normalized progress across a start/end range that either gets mapped straight onto a timeline or used to fire callbacks at boundaries, with pinning as the one mechanism it adds on top to hold a section still while its scroll range plays out.

   13 min
8. GSAP vs CSS vs the Web Animations API: when the JS engine wins

   CSS transitions and the Web Animations API are declarative front-ends to a browser engine that can hand transform and opacity animations to the compositor thread entirely off the main thread, while GSAP runs every tween through its own JavaScript ticker on the main thread — so the real choice is never "which library is better" but whether an animation's requirements are cheap enough for the compositor's narrow contract or complex enough to need main-thread orchestration.

   13 min