❮ Previous Next ❯

Tween Repeat

  • Gets or sets the number of times the tween should repeat after its first playthrough.

  • repeat()

    repeat(value:Number): [Number | self]

    Gets or sets the number of times the tween should repeat after its first playthrough.

    Parameters

    • value (Number, default = 0)

      • Defines how many times the tween will repeat after its initial run.

      • If omitted, returns the current repeat count (getter).

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

      • A value of -1 makes the tween repeat indefinitely.

      • The value should always be an integer.

    Returns

    • [Number | self]

      • Returns the current repeat value when no parameter is passed.

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

    Details

    The repeat() method controls how many times a tween will replay after completing its first iteration.

    For example:

    • repeat: 0 → plays once (default).

    • repeat: 1 → plays twice (initial play + 1 repeat).

    • repeat: -1 → loops indefinitely.

    You can enhance repeat behavior using:

    • yoyo: true → makes the animation alternate direction each cycle (forward then backward).

    • repeatDelay → adds a delay between repeats.

You can also define the repeat directly in your tween configuration: 

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


// Get current repeat count
var repeatCount = myTween.repeat();

// Set repeat count to 2 (plays three times total)
myTween.repeat(2);

// Infinite looping animation
myTween.repeat(-1);

// Chain repeat with yoyo and play
myTween.repeat(2).yoyo(true).play();
❮ Previous Next ❯