Time-based animations.

A time-based animation has its own internal clock, measured in seconds. When the trigger fires, the clock starts; when it reaches the duration, the animation stops (or loops).

They’re what most people picture when they hear “animation”: a thing happens, then it’s done. Compare with scroll-based animations which advance and reverse with the visitor’s scroll position.

Reach for a Time animation when:

• The motion happens once at a moment you can name (page load, button click, mouse hover).
• The motion needs an exact duration. A 1.2-second entrance is precise. The same idea on scroll would depend on how fast the visitor scrolls.
• The motion is decoration, not navigation. Hovers, taps, attention pulses on a CTA: all Time.
• You want it to loop. Background ambience, breathing icons, infinite spinners: Time with loop on.

The right panel for a Time animation has:

• Targets: the element(s) to animate. See Picking an element.
• Trigger: load, inview (default), click, or hover. See Triggers reference.
• Duration: total length in seconds.
• Delay: seconds to wait after the trigger before the animation starts.
• Loop: off, a number of repetitions, or infinite.
• Yoyo: on a loop, reverse on every other pass.
• Easing: the curve between checkpoints. See Easing.
• Split text (optional): break a heading into words, lines, or characters and animate each one with a stagger. See Animating text.
• Properties: opacity, transforms, color, blur, etc. See the Properties reference.
• Checkpoints: keyframes positioned at 0% to 100% of the duration. See Editing keyframes.

By default, an animation runs once and stops. Loop turns it into a repeated cycle.

• Loop off: plays once.
• Loop = N: plays N+1 times total (one initial pass plus N repeats).
• Loop = infinite: plays forever, until the visitor leaves the page.
• Yoyo on: the animation reverses on every other pass. With infinite loop and yoyo, the element bounces between start and end forever.

Two settings that look similar but do different things:

• Delay: seconds to wait after the trigger fires before this animation begins. Same delay for all targets.
• Stagger: seconds between each target’s start. The first target starts at time 0 (plus delay), the second starts at stagger seconds later, and so on.

A Time animation with five targets, delay 0.3, stagger 0.1: the first target starts at 0.3s, the second at 0.4s, the third at 0.5s, and so on.

Stagger also drives split-text reveals: each word, line, or character animates with the stagger value as its spacing.

• Triggers reference: details on each trigger and the trigger element override.
• Scroll-based animations: the other half of the type system.
• Grouping animations: choreograph multiple Time animations on one timeline.