logo svelte /motion v0.7.17
FIG-001/ DRAG

angled drag composition.

The card rests at an authored angle. Dragging translates it without flattening that angle — the drag translation is composed into the same transform as the authored rotate and skew, rather than replacing it.

  • The resting angle is authored as transform channels — rotate and skewX on style — not as a raw CSS transform string.
  • Grab and drag. The card keeps its angle the whole way: drag translation is written into the same composed transform instead of overwriting it.
  • whileDrag layers a second rotate on top for the duration of the gesture, which takes over the channel while the pointer is down and hands it back on release.
↩ all examples
channels · rotate · skewX · whileDrag mode · live running source
drag lab angled composition
rotate −8°
skewX −5°
SM angled
authored rotate authored skew whileDrag rotate
category · drag
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ DRAG

perspective tilt on grab.

A 3D variant: grabbing the card tilts it on both axes under a transformPerspective, and it keeps tilting while it tracks the pointer. The perspective and rotation survive every live drag frame.

  • transformPerspective is set on the card itself, so the tilt reads as depth without needing a perspective wrapper around the stage.
  • whileDrag applies rotateX and rotateY together. Both 3D channels stay composed with the live translation for every frame of the drag.
  • Release and the spring returns the card to flat while it settles back inside the bounds — the tilt unwinds instead of snapping.
↩ all examples
channels · transformPerspective · rotateX · rotateY mode · live running source
drag lab 3d composition
transformPerspective 900
rotateX −14° · rotateY 22°
SM tilt
transformPerspective whileDrag rotateX whileDrag rotateY
category · drag
sheet · sheet 02 / 02
⟳ to re-run

Drag Transforms