Back to the pack

Glossary

GSAP timeline

The list of every movement in a video, each placed at an exact second, that a renderer can jump to at any moment.

Updated

A GSAP timeline is a sequence of animations, each placed at an exact time, built with GSAP, a widely used JavaScript animation library. In a video made with code, the timeline holds every movement: the title rising at 0.4 s, the second word slamming in at 0.95 s, the logo fading out at 5.8 s.

In HyperFrames, the timeline is created paused and registered under the composition's id. The renderer then moves it to the exact time of each frame (frame 90 at 30 fps is 3.0 s) and captures the picture. Nothing plays in real time, so nothing stutters.

A tiny example

const tl = gsap.timeline({ paused: true });
tl.from("#title", { y: 40, opacity: 0, duration: 0.5, ease: "power3.out" }, 0.4);
tl.to("#title", { opacity: 0, duration: 0.2, ease: "power2.in" }, 5.8);
window.__timelines["intro"] = tl;

The number at the end of each line is the position on the timeline in seconds. The duration says how long the move takes and the ease says its speed curve.

Rules that keep frames exact

  • Paused, and registered. The timeline is created with paused: true and stored under the same id as the composition, or the render shows a frozen page.
  • Explicit positions. Important moves get an exact time, so changing one beat does not shift the rest.
  • Transforms and opacity. Moving with x, y, scale and opacity is smooth; animating layout properties such as top or width can jump.
  • No clocks or dice. Date.now() and unseeded random numbers make frames differ between renders; use a seeded random for confetti and particles.
  • Media belongs to the renderer. Video and audio start through their own timing attributes, not from the timeline.

Eases in one breath

Ease-out for arrivals, ease-in for exits, ease-in-out for moves across the screen, back for pops that overshoot, and a gentle sine for floating. Entrances usually take 0.25 to 0.6 s; exits are faster, 0.15 to 0.3 s.

The timeline is part of a HyperFrames composition; turning it into a file is a render. Animated text built on timelines is kinetic typography.

Every Motion Cheat Code template runs on one paused GSAP timeline; the free starter kit's Counter Card template is a small one you can open and read.

Questions

Why must the timeline be paused?

Because the renderer, not the browser clock, decides which moment is on screen. A paused timeline can be moved to any exact time, so every frame is captured at the right moment.

What is an ease?

The speed curve of a movement. An ease-out starts fast and slows into place, which suits things arriving; an ease-in starts slow and speeds up, which suits things leaving.

Do I have to write GSAP code myself?

No. In a prompt you describe the timing in plain words and numbers ("0.3 s, slams in, 0.25 s, expo.out"), and Claude Code writes the timeline.