Chapter 26: gsap.quickTo()

Core Idea

gsap.quickTo() creates a reusable, optimized tween function bound to one numeric property, for cases where you call gsap.to() on the same target/property repeatedly (e.g. pointermove) and want better performance without giving up easing.

Key Concepts

• Returns: a Function — calling it with a new number restarts/redirects the underlying (reused) Tween toward that value.
• Skipped conveniences: unit conversion, relative values, function-based values, random() parsing, and most plugin-driven properties (only direct/CSS-related properties work — no attr, no morphSVG, etc.).
• Third argument: an optional vars object for tween settings (duration, ease, etc.), set once at creation.

Code Examples

let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" });

document.addEventListener("pointermove", (e) => {
  xTo(e.clientX); // smoothly eases toward the new x on every pointer move
});

• What it demonstrates: following the mouse smoothly by calling the same tween function repeatedly instead of creating a new gsap.to() call every event.

Key Takeaways

1. Unlike quickSetter() (instant), quickTo() still animates with easing — it's the performant version of repeatedly calling gsap.to(), not gsap.set().
2. Each call redirects the same reused Tween rather than creating a new one, which is exactly what keeps it fast under high-frequency events.

Connects To

• gsap.quickSetter(): the instant (non-eased) counterpart for the same high-frequency-update problem.
• gsap.to(): the full-featured tween creator this is optimized from.