logo svelte /motion v0.9.2
FIG-001/ PATH

straight endpoints, curved travel.

Click the stage to send the box between fixed endpoints. Strength controls the bend while direction can stay automatic or lock clockwise/counter-clockwise.

  • arc() replaces straight x/y interpolation with a quadratic bend.
  • Auto direction remembers a stable screen-space side across reversals.
  • The endpoints stay exact; only the route between them changes.
↩ all examples
api · arc()input · transition.pathmode · live mode · live running source
// transition.path strength 0.5 · auto
strength
click the stage quadratic arc
category · path
sheet · sheet 01 / 03
⟳ to re-run
FIG-002/ ROTATE

path tangent, visible heading.

The arrow follows the curve and rotates with its tangent. Path rotation uses a separate channel, so authored rotate values stay additive.

  • rotate: true follows the full path tangent.
  • A value from 0 to 1 scales the tangent rotation.
  • Path rotation is additive to the element's own rotate channel.
↩ all examples
api · arc()input · transition.pathmode · live mode · live running source
// tangent following rotate: true
click the stage pathRotation + rotate
category · rotate
sheet · sheet 02 / 03
⟳ to re-run
FIG-003/ LAYOUT

shared element, curved FLIP.

A single layoutId bubble swaps between two slots. transition.layout.path bends the projection animation without changing the destination layout.

  • The same path works for shared layoutId transitions.
  • Place it at transition.layout.path to configure FLIP motion.
  • Layout shifts under 20px stay straight to avoid a noisy detour.
↩ all examples
api · arc()input · transition.layout.pathmode · live mode · live running source
// shared layout layoutId="arc-bubble"
click to swap slots transition.layout.path
category · layout
sheet · sheet 03 / 03
⟳ to re-run

arc()