Chapter 28: gsap.set()

Core Idea

gsap.set() immediately applies properties to target(s) — functionally a zero-duration to() tween with a more intuitive name.

Key Concepts

• Equivalence: gsap.set(el, {x:100}) is identical to gsap.to(el, {duration:0, x:100}).
• Multiple targets: accepts an array or selector text just like any other tween method.

Code Examples

gsap.set(".class", { x: 100, y: 50, opacity: 0 });
gsap.set([obj1, obj2, obj3], { x: 100, y: 50, opacity: 0 });

• What it demonstrates: instantly positioning single and multiple targets without any animation duration.

Key Takeaways

1. Use set() for initial/reset states before an animation begins, instead of writing duration: 0 on a to() call.
2. For high-frequency repeated sets (e.g. pointer move), gsap.quickSetter() performs better.

Connects To

• gsap.quickSetter(): performance-optimized alternative for repeated sets on the same property.