❮ Previous

Tween Yoyo

  • The yoyo() method enables back-and-forth playback on repeats.

  • yoyo()

    yoyo(value:Boolean): [Boolean | self]

    Gets or sets the tween’s yoyo state, which determines whether the animation reverses direction on each repeat — playing forward, then backward, and so on.

    Parameters

    • value (Boolean, default = false)

      • If omitted, returns the current yoyo state (getter).

      • If defined, sets the yoyo state (setter) and returns the tween instance for method chaining.

      • When set to true, the tween alternates direction each time it repeats.

    Returns

    • [Boolean | self]

      • Returns the current yoyo state when no value is provided.

      • Returns the tween instance when a new value is set (for chaining).

    Details

    The yoyo() method enables back-and-forth playback on repeats.
    It works in combination with the repeat property:

    • repeat defines how many times the tween repeats.

    • yoyo defines whether each repeat plays backward.

    To use yoyo, make sure the tween’s repeat value is greater than 0.
    Setting yoyo: true has no effect on the tween’s reversed property.

    Example Behavior:

    • repeat: 2, yoyo: false → plays: forward → restart → forward → restart → forward.

    • repeat: 2, yoyo: true → plays: forward → backward → forward.

You can also define yoyo during tween creation: 

gsap.to(obj, { duration: 1, x: 100, repeat: 1, yoyo: true });


// Get current yoyo state
var isYoyo = myAnimation.yoyo();

// Enable yoyo mode
myAnimation.yoyo(true);

// Chain with other methods
myAnimation.yoyo(true).repeat(3).timeScale(2).play(0.5);
❮ Previous