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).
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Trigger | MotionTrigger | OnAppear | Animation trigger: OnAppear, OnInView, or Manual. |
| DisableOnPrerender | bool | false | Prevents animation if content was server pre-rendered (SSR). |
| StaggerChildren | double? | null | Delay in seconds between each child Motion's animation. |
| InViewOptions | InViewOptions? | null | Options for OnInView trigger (Threshold, RootMargin). |
| Presets | RenderFragment? | null | Preset components: FadeIn, ScaleIn, SlideInFromLeft, Spring, etc. |
| ChildContent | RenderFragment? | null | The content to animate. |