Chapter 7: Snap (Core Plugin)

Core Idea

The snap property forces one or more animated values to jump to the closest value in an increment, an array, or an array with a radius threshold — live, throughout the tween, not just at the end.

Key Concepts

• snap: "x,y": snaps a comma-delimited list of properties to the closest whole number.
• snap: { x: 20 }: snaps to the closest multiple of an increment.
• snap: { x: [0, 50, 150, 500] }: snaps to the closest value in an explicit array.
• snap: { x: { values: [...], radius: 20 } }: only snaps when within radius of one of the array values.

Code Examples

gsap.to(".class", {
  x: 1000,
  snap: {
    x: { values: [0, 50, 150, 500], radius: 20 },
  },
});

• What it demonstrates: snapping x to the nearest listed value, but only once the animated value comes within 20px of it.

Key Takeaways

1. Snapping happens continuously during the tween, producing a stepped motion, not just a rounded final value.
2. Multiple snap configurations (increment, array, array+radius) can be mixed across different properties in the same tween.

Connects To

• Modifiers (Core Plugin): the general mechanism Snap is a convenience shortcut for.
• gsap.utils.snap(): the standalone utility version of the same snapping logic, usable outside a tween.