Chapter 6: Modifiers (Core Plugin)

Core Idea

A modifiers function intercepts the value GSAP is about to apply to a property on every tick, letting you run custom logic (snapping, clamping, wrapping) and return the value that actually gets applied.

Key Concepts

• Modifier signature: (value, target) => newValue — value is the about-to-be-applied value (number or string, depending on the property), target is the animated object itself.
• Live interception: runs on every tick during the tween, not just once at the end.
• Relationship to Snap/RoundProps: both are internally shortcuts for common modifier patterns (rounding, snapping) and share the same mechanism — you can't combine roundProps and a custom modifier on the same property, but you can replicate rounding yourself with Math.round() inside a modifier.

Code Examples

// wrap x between 0 and 100 while animating toward 500
gsap.to(".box", {
  x: 500,
  modifiers: {
    x: (x) => gsap.utils.wrap(0, 100, parseFloat(x)) + "px",
  },
});

• What it demonstrates: using a modifier plus a utility function (wrap) to build a seamless looping effect, the same technique behind carousel-style infinite scroll.

Anti-patterns

• Combining roundProps and a modifier on the same property: they use the same underlying mechanism and conflict; do the rounding inside the modifier instead.
• Modifying transform shorthands incorrectly: use scaleX/scaleY (not scale) and rotation (not rotationZ) inside modifiers.

Key Takeaways

1. Modifiers are the general-purpose escape hatch for per-tick custom value logic; Snap/RoundProps are convenience shortcuts built on the same mechanism.
2. A single .to() with a modifier and stagger can implement a seamless repeating carousel without duplicating assets.

Connects To

• Snap (Core Plugin): dedicated shortcut for snapping behavior, built on the same mechanism as Modifiers.
• gsap.utils.wrap(): commonly paired with modifiers for wrap-around effects.