logo svelte /motion v2.11.0
FIG-001/ GESTURE

pinch to zoom and twist.

Pinch the card to zoom between 1x and 4x and twist it, and drag to move it. Past its limits it resists and springs back; on release its rotation snaps to the nearest 90°. Trackpad: pinch, and in Safari twist with two fingers too. Touch: pinch and twist with two fingers. Mouse: hold ctrl and scroll.

  • pinch needs pinchFeatures in a LazyMotion, on motion.* components too.
  • scale: { min: 1, max: 4 } resists past the limits and springs back on release.
  • rotate: { snap: 90 } rotates to the nearest 90° on release.
↩ all examples
api · pinch · draginput · touch · trackpadmode · live mode · live running source
// pinch photo scale 1.00 · rotate 0°
Trackpad: pinch. Touch: pinch and twist with two fingers.
Mouse: hold ctrl and scroll over the card. A trackpad twists only in Safari.
category · gesture
sheet · sheet 01 / 03
⟳ to re-run
FIG-002/ LIMITS

resist, stop or snap back.

Three cards limited to between 0.5x and 2x. Pinch each past 2x: elastic: 0 stops dead, the default resists and springs back, and snapToOrigin returns to 1x on release.

  • elastic: 0 stops at the limit; 1 doesn't resist.
  • The default, 0.35, resists past the limit and springs back.
  • snapToOrigin animates scale to 1, and rotation and x/y to 0, on release.
↩ all examples
api · scale · elasticinput · touch · trackpadmode · live mode · live running source
// limits and elasticity scale 0.5 – 2
elastic: 0 ×1.00
default ×1.00
snapToOrigin ×1.00
Pinch past 2x. Mouse: hold ctrl and scroll over a card.
category · limits
sheet · sheet 02 / 03
⟳ to re-run
FIG-003/ VANILLA

pinch() on a plain div.

No motion component and no LazyMotion: pinch() binds the gesture to a plain element, its start callback returns handlers for each pinch, and rotation snaps to 45° on release.

  • pinch(element, onPinchStart, options) returns a function that removes the gesture.
  • The start callback can return an end handler, or { onPinch, onComplete }.
↩ all examples
api · pinch()input · touch · trackpadmode · live mode · live running source
// vanilla pinch() idle
  1. no pinches yet
pinch(card, onPinchStart, { rotate: { snap: 45 } })
Mouse: hold ctrl and scroll over the card.
category · vanilla
sheet · sheet 03 / 03
⟳ to re-run

Pinch