Chapter 56: Timeline.invalidate()

Core Idea

invalidate() flushes internally recorded starting/ending values so the timeline re-parses its vars on the next render, instead of restarting from previously cached values.

Code Examples

gsap.set(el, { x: 0 });
let tween = gsap.to(el, { x: "+=100" }); // animates 0 -> 100

// after it completes, el.x is 100. Without invalidate(), restart() replays 0 -> 100 again.
tween.invalidate().restart(); // now animates 100 -> 200

• What it demonstrates: using invalidate() before restart() so a relative ("+=100") tween re-reads the current value instead of its original cached starting point.

Key Takeaways

1. Doesn't affect timing (duration/delay/startTime), only which starting/ending values get used on re-render.
2. Essential for correctly repeating relative-value tweens from their new current state.