Chapter 25: gsap.quickSetter()

Core Idea

gsap.quickSetter() creates a highly optimized setter function tied to one target/property, for cases where you call gsap.set() on the same thing many times per second (e.g. pointermove) and need 50-250% better performance.

Key Concepts

• Returns: a Function that directly pipes a value to the target property, skipping convenience work gsap.set() normally does.
• Skipped conveniences: unit auto-conversion (though you can fix a unit at creation time), relative values, function-based values, random() parsing, property-specific browser workarounds, and property name aliasing ("x" works, "translateX" doesn't).
• Composability: because it accepts a single value, it can be chained after gsap.utils.pipe() with other utilities like clamp() or snap() to sanitize the incoming number first.

Code Examples

let xSetter = gsap.quickSetter("#id", "x", "px");
xSetter(100); // instantly sets x to 100px, far cheaper than gsap.set() repeatedly

• What it demonstrates: creating a reusable, property-bound setter once and calling it repeatedly with plain numbers.

Key Takeaways

1. Only worth reaching for in genuinely performance-critical, high-frequency update scenarios — gsap.set() is fine for normal use.
2. Avoid creating a quickSetter for transformOrigin specifically, since it needs SVG-related workarounds this shortcut skips.

Connects To

• gsap.set(): the full-featured version this optimizes away from.
• gsap.quickTo(): the animated (tweened) equivalent of this pattern.