Chapter 395: Control and Callbacks

Core Idea

All the animations we 've looked at so far play on page load or after a delay. But what if you want a little more control over your animation?

Key Concepts

• onComplete: invoked when the animation has completed.
• onStart: invoked when the animation begins
• onUpdate: invoked every time the animation updates (on every frame while the animation is active).
• onRepeat: invoked each time the animation repeats.
• onReverseComplete: invoked when the animation has reached its beginning again when reversed.

Code Examples

// store the tween or timeline in a variable
let tween = gsap.to("#logo", {duration: 1, x: 100});

//pause
tween.pause();

//resume (honors direction - reversed or not)
tween.resume();

//reverse (always goes back towards the beginning)
tween.reverse();

//jump to exactly 0.5 seconds into the tween
tween.seek(0.5);

//jump to exacty 1/4th into the tween 's progress:
tween.progress(0.25);

//make the tween go half-speed
tween.timeScale(0.5);

//make the tween go double-speed
tween.timeScale(2);

//immediately kill the tween and make it eligible for garbage collection
tween.kill();

// You can even chain control methods
// Play the timeline at double speed - in reverse.
tween.timeScale(2).reverse();

• What it demonstrates: typical usage of Control and Callbacks in a GSAP animation.

Key Takeaways

1. onComplete: invoked when the animation has completed.
2. onStart: invoked when the animation begins
3. onUpdate: invoked every time the animation updates (on every frame while the animation is active).
4. onRepeat: invoked each time the animation repeats.
5. onReverseComplete: invoked when the animation has reached its beginning again when reversed.

Connects To

• play: see ch110 — play
• pause: see ch108 — pause
• reverse: see ch117 — reverse
• speed up: see ch126 — timeScale
• timeScale: see ch088 — timeScale