What's the difference between yoyo and repeat?

repeat alone restarts the tween from the beginning each time. yoyo + repeat alternates forward and reverse playback. The result is continuous motion vs. a 'flick' back to start every loop.

Does yoyo work with timelines?

Yes - the timeline's overall playback reverses on each repeat. All child tweens reverse together. The same ease-pairing advice applies: avoid asymmetric child eases (or use a single symmetric ease at the timeline level via defaults).

Can I control how many forward and backward cycles?

Yes - `repeat: 2, yoyo: true` is three plays (forward, reverse, forward). `repeat: 3, yoyo: true` is four plays (forward, reverse, forward, reverse). The total play count is `1 + repeat`.

What's easeReverse (and what happened to yoyoEase)?

`easeReverse` lets the reverse direction use a different ease than the forward direction. `easeReverse: 'power2.in'` means the forward direction uses the tween's `ease` and the reverse uses power2.in. As of GSAP 3.15 (released 2026) this replaces the old `yoyoEase` option, which is now deprecated but still works via automatic conversion. Use `easeReverse` going forward; it also applies to any `reverse()` call, not just yoyo.

Should I use repeatDelay with yoyo?

Only if you want a visible pause at each endpoint. `repeatDelay: 0.5` adds half a second of stillness before the next direction plays. For a pulsing dot that should 'hold' at the peak, repeatDelay helps; for continuous flow, leave it off.

Timeline

yoyo

yoyo is a GSAP repeat modifier that makes each odd repeat play in reverse. The tween goes forward, backward, forward, backward, and so on - like a yo-yo. Without it, repeats restart from the beginning each time, which feels jumpy. With it, the motion stays continuous. Always paired with `repeat`.

Updated June 2, 2026

Mechanics

How yoyo works

By itself, repeat: 3 makes the tween play forward, snap back to the start, play forward, snap back, play forward. With yoyo: true, the snap-back becomes a reverse playback: forward, reverse, forward, reverse, forward. The motion stays continuous - no jump frame.

script.js

Repeat counts: repeat: 3 is four plays total (one initial + three repeats); repeat: -1 is infinite. With yoyo, an infinite repeat alternates forever between the two states.

Ease pairing

Always pair with ease-in-out

yoyo with an asymmetric ease feels wrong. power.out starts fast and brakes - reversed, it becomes power.in (slow start, fast end). The forward beat and the backward beat have different rhythms; the loop limps. Use sine.inOut, power2.inOut, or any symmetric curve so each direction matches the other.

When

Use yoyo for

Pulsing attention-grabbers (a notification dot that breathes)
Looping color drift (mesh gradient cycling between palette stops)
Hover idle states where you want gentle continuous motion (a button that breathes when you hover)
Decorative continuous motion (subtle background pan, rotating ring, hover halo)
Anything that needs to alternate between two states forever without a visible 'reset' frame

Alternatives

Use something else when

You need one-shot motion - don't add repeat/yoyo, just play once
You need a complex multi-state loop - use a timeline with several tweens and repeat: -1 on the timeline itself
The 'two states' need different easings on the way out vs. the way in - yoyo can't help, use a timeline with explicit forward + reverse tweens
You need to control each beat (yoyo is automatic) - use a timeline with explicit calls and a labeled loop

In production

Used in these Annnimate components

The Mesh Gradient uses yoyo on the color drift so the gradient breathes between palette stops without a hard reset
The Rainbow Button uses yoyo on the hue tween so the gradient sweeps back and forth, never snapping
The Tooltip uses yoyo on the subtle bounce-in / bounce-out hover idle state
The Background Color scroll component uses yoyo on the section-edge tween so colors blend in both scroll directions

Used in components

See it running in production

Mesh GradientA full-screen animated mesh gradient with colour points that drift around slowly on their own, and your cursor stirs the colours like fluid as you drag through them.

Rainbow ButtonA rainbow gradient that flows across the button on hover, shifting through the colours as it goes.

TooltipTooltips that follow your cursor or stick to an element, and flip themselves around when they'd run off the edge of the screen.

Background ColorThe section background and text colours shift smoothly as you scroll from one zone to the next, so the page changes mood without any hard breaks.

FAQ

Common questions

What's the difference between yoyo and repeat?: repeat alone restarts the tween from the beginning each time. yoyo + repeat alternates forward and reverse playback. The result is continuous motion vs. a 'flick' back to start every loop.
Does yoyo work with timelines?: Yes - the timeline's overall playback reverses on each repeat. All child tweens reverse together. The same ease-pairing advice applies: avoid asymmetric child eases (or use a single symmetric ease at the timeline level via defaults).
Can I control how many forward and backward cycles?: Yes - repeat: 2, yoyo: true is three plays (forward, reverse, forward). repeat: 3, yoyo: true is four plays (forward, reverse, forward, reverse). The total play count is 1 + repeat.
What's easeReverse (and what happened to yoyoEase)?: easeReverse lets the reverse direction use a different ease than the forward direction. easeReverse: 'power2.in' means the forward direction uses the tween's ease and the reverse uses power2.in. As of GSAP 3.15 (released 2026) this replaces the old yoyoEase option, which is now deprecated but still works via automatic conversion. Use easeReverse going forward; it also applies to any reverse() call, not just yoyo.
Should I use repeatDelay with yoyo?: Only if you want a visible pause at each endpoint. repeatDelay: 0.5 adds half a second of stillness before the next direction plays. For a pulsing dot that should 'hold' at the peak, repeatDelay helps; for continuous flow, leave it off.

PrevioustimeScaletimeScale is a GSAP method that changes the playback rate of a tween or timeline while it is running: timeScale(2) plays it at double speed, timeScale(0.5) at half speed, and timeScale(1) is normal.