Chapter 389: updating to GSAP 3

Core Idea

Upgrading your project from using GSAP 2 to GSAP 3? It's easy.

Key Concepts

• TweenLite.selector - There's no more TweenLite.selector or TweenMax.selector (it's pointless with document.querySelectorAll() that's in browsers now).
• timeline.addCallback() - dropped in favor of the simpler .call() method.
• TweenMax's pauseAll(), resumeAll(), killAll(), and globalTimeScale() - dropped in favor of directly accessing methods on the globalTimeline, like:

Code Examples

// old 
TweenMax.to(".class", 2, {x: 100});

// new
gsap.to(".class", {duration: 2, x: 100});

// -- Timelines --

// old 
var tl = new TimelineMax();

// new
var tl = gsap.timeline();

• What it demonstrates: typical usage of updating to GSAP 3 in a GSAP animation.

Key Takeaways

1. TweenLite.selector - There's no more TweenLite.selector or TweenMax.selector (it's pointless with document.querySelectorAll()…
2. timeline.addCallback() - dropped in favor of the simpler .call() method.
3. TweenMax's pauseAll(), resumeAll(), killAll(), and globalTimeScale() - dropped in favor of directly accessing methods on the…

Connects To

• gsap: related GSAP concept
• timeline: see ch037 — Timeline
• Tween: see ch097 — Tween
• .to(): see ch033 — gsap.to()
• .from(): see ch014 — gsap.from()