Motion
Declarative animation system powered by Motion.dev
Fade In
Simple fade animation on appear
Animated Card
This card fades in on page load
Content appears smoothly with a fade animation while the app is already interactive.
DisableOnPrerender="true" when you want instant content visibility during SSR/prerender. If content is shown during prerender, it will NOT animate when the app becomes interactive, preventing jarring transitions. Animation only plays if the app was already interactive from the start.
Scale In with Spring
Bouncy scale animation using spring physics
Spring Physics
Natural, bouncy animation
This card scales in with spring-based easing for a more natural feel.
Slide In
Slide animations from different directions
From Left (CubicInOut)
From Bottom (CubicOut)
Combined Animations
Combine multiple animation effects
Fade + Scale + Slide
Three animations working together
This combines fade, scale, and slide for a sophisticated entrance.
Micro-Interactions
Subtle animations triggered manually
Pulse Animation
Continuous pulsing effect
Scroll-Triggered Animations
Animations that trigger when scrolling into view
Card 1
Appears when scrolled into view
This card animates in as you scroll past it.
Card 2
Appears when scrolled into view
This card animates in as you scroll past it.
Card 3
Appears when scrolled into view
This card animates in as you scroll past it.
Staggered List
List items animate in sequence
First item appears first
Second item follows shortly after
Third item comes next
Fourth item with a slight delay
Fifth item completes the sequence
Staggered Grid
Grid items animate in with delay
Easing Functions
Compare different easing curves (click individual cards to replay)