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`.

Ships in
GSAP core
Used in
4 Annnimate components
Pairs with
gsap.timeline()ease-in-out

Updated June 2, 2026

Pick an underlined value to change it

gsap.to(".box", {
  x: 196,
  duration: ,
  ease: ,
  repeat: 1,
  yoyo: true,
});

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.

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.

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

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

Used in these Annnimate components

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

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.