Every animation property in action. Click a preset in the page-transition bar below to see View Transitions.
Scroll away and back to replay.
Hover to preview each effect.
Looping continuously.
No presets — raw keyframes passed inline.
Toggle to see exit animations.
Elements smoothly animate to their new positions when the layout changes.
Click a block to remove it.
Add/remove items to see layout animations, exit animations, and hover effects.
Free drag, axis lock, constraints, and elastic overscroll.
Free
X axis only
Constrained
Elastic
Slider — snap_back: false (stays where you drop it)
Dropped at 0px
phx-drag-end pushes the release position to the server.
x: 0px
y: 0px
Drag right past 80px to remove.
This element triggers its animation while in the scroll "sweet spot".
Each element uses a different transition — spring physics or tween easing. Scroll away and back to replay.
Each child is automatically delayed by its index. Scroll away and back to replay.
Staggered entrance with increasing delays. Scroll away and back to replay.
Different durations on every element. Scroll away and back to replay.