Learn PREACT-MOTION with Real Code Examples

Uses spring physics for natural movement.

Designed specifically for Preact’s lightweight component model.

Declarative motion components like Motion, StaggeredMotion, and TransitionMotion.

Automatically interpolates animated values.

Great for smooth UI animations without heavy dependencies.

Motion - animate single style object

StaggeredMotion - sequential motion

TransitionMotion - animate mounting lists

Spring - physics engine wrapper

Presets - gentle, wobbly, stiff springs

Springs: natural motion vs linear

Motion component controls interpolation

StaggeredMotion chains multiple animations

TransitionMotion handles dynamic lists

Presets for common spring behaviors

components/ - animated UI parts

motion/ - spring presets

styles/ - optional CSS

hooks/ - interaction handlers

App.jsx - root animations

Define animated values using spring()

Wrap UI with Motion

Output styles in render callback

Animate layout or transforms

Add StaggeredMotion for sequences

Beginner: fade and scale

Intermediate: accordion or toggle

Advanced: draggable element with springs

Expert: list animations with TransitionMotion

Architect: full motion library integration

Preact Motion vs React-Motion: nearly identical API, Preact-optimized.

Preact Motion vs Framer Motion: PM is lighter, FM has more features.

Preact Motion vs React Spring: PM simpler, smaller.

Preact Motion vs CSS: PM allows physics-based interpolation.

Preact Motion vs GSAP: GSAP for timelines, PM for UI springs.

2015 - Inspiration from React-Motion

2018 - First Preact Motion builds appear

2020 - Full community adoption

2023 - Updates for Preact X

2025 - Stable spring-based animation solution

Spring - physics-based interpolation

Motion - animates a single object

StaggeredMotion - sequence animations

TransitionMotion - list transitions

Preset - predefined spring configs