Motion for Svelte

Production-ready animations, gestures, layout and scroll effects for Svelte 5, powered by the same engine as Motion for React and Vue.

Everything Motion does, in Svelte

Every card is live. Play with it, then read how it works.

Keyframes on a loop

Keyframes, springs and variants. Change a value, and Motion animates to it.

Drag, hover or press the ball

Hover, press, focus and drag, for mouse, touch and keyboard.

Click to shuffle

Animate any layout change with transforms, even between different elements.

Click a shape to remove it

Elements animate out before Svelte removes them, and the rest make room.

Scroll the list

Link any value to scroll progress, or animate elements as they come into view.

Move your pointer here

Springy values that update at 120fps without re-rendering Svelte.