Learn Preact-motion - 10 Code Examples & CST Typing Practice Test

Preact Motion is a lightweight animation library for Preact that provides physics-based, spring-driven animations similar to React-Motion. It brings declarative motion primitives such as springs, presets, transitions, and dynamic interpolation tailored for Preact’s small footprint and high performance.

View all 10 Preact-motion code examples →

Simple Fade In Scale Up Fade + Scale Slide Right Slide Up Rotate Scale + Rotate Fade + Slide Right Fade + Slide Up Bounce Scale

Learn PREACT-MOTION with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple Fade In

# preact_motion/demo/App1.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ opacity: 0 }} style={{ opacity: 1 }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'red', opacity: style.opacity }} />
        )}
        </Motion>
    )
}

Fades a div in on mount

Let’s Try →

Scale Up

# preact_motion/demo/App2.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ scale: 0.5 }} style={{ scale: 1 }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'green', transform: `scale(${style.scale})` }} />
        )}
        </Motion>
    )
}

Scales up a div from 0.5 to 1

Let’s Try →

Fade + Scale

# preact_motion/demo/App3.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ opacity: 0, scale: 0.5 }} style={{ opacity: 1, scale: 1 }}>
        {style => (
        <div style={{ width: 120, height: 120, background: 'blue', opacity: style.opacity, transform: `scale(${style.scale})` }} />
        )}
        </Motion>
    )
}

Fades in and scales a div

Let’s Try →

Slide Right

# preact_motion/demo/App4.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ x: -100 }} style={{ x: 0 }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'orange', transform: `translateX(${style.x}px)` }} />
        )}
        </Motion>
    )
}

Slides a div from left to right

Let’s Try →

Slide Up

# preact_motion/demo/App5.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ y: 100 }} style={{ y: 0 }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'purple', transform: `translateY(${style.y}px)` }} />
        )}
        </Motion>
    )
}

Slides a div up from below

Let’s Try →

Rotate

# preact_motion/demo/App6.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ rotate: 0 }} style={{ rotate: 360 }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'cyan', transform: `rotate(${style.rotate}deg)` }} />
        )}
        </Motion>
    )
}

Rotates a div from 0 to 360 degrees

Let’s Try →

Scale + Rotate

# preact_motion/demo/App7.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ scale: 0.5, rotate: 0 }} style={{ scale: 1, rotate: 360 }}>
        {style => (
        <div style={{ width: 120, height: 120, background: 'magenta', transform: `scale(${style.scale}) rotate(${style.rotate}deg)` }} />
        )}
        </Motion>
    )
}

Scales and rotates a div

Let’s Try →

Fade + Slide Right

# preact_motion/demo/App8.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ opacity: 0, x: -100 }} style={{ opacity: 1, x: 0 }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'lime', opacity: style.opacity, transform: `translateX(${style.x}px)` }} />
        )}
        </Motion>
    )
}

Fades in while sliding right

Let’s Try →

Fade + Slide Up

# preact_motion/demo/App9.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ opacity: 0, y: 50 }} style={{ opacity: 1, y: 0 }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'yellow', opacity: style.opacity, transform: `translateY(${style.y}px)` }} />
        )}
        </Motion>
    )
}

Fades in while sliding up

Let’s Try →

Bounce Scale

# preact_motion/demo/App10.jsx
import { h } from 'preact'
import { Motion, spring } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ scale: 0.5 }} style={{ scale: spring(1, { stiffness: 200, damping: 10 }) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'orange', transform: `scale(${style.scale})` }} />
        )}
        </Motion>
    )
}

Scales a div with a spring bounce effect

Let’s Try →

Frequently Asked Questions about Preact-motion

What is Preact-motion?

What are the primary use cases for Preact-motion?

Smooth, spring-based UI animations. Element transitions without CSS keyframes. Animated toggles and switches. Layout-based motion between states. Declarative dynamic value interpolation

What are the strengths of Preact-motion?

Very lightweight compared to Framer Motion or React Spring. Natural spring physics. Perfect for micro-interactions. Minimal API surface - easy to learn. Optimized for Preact performance

What are the limitations of Preact-motion?

Not a full animation engine (no timeline or gestures). Less feature-rich than React Spring or Framer Motion. Limited third-party ecosystem. Requires Preact - not directly usable in React. Cannot handle complex animation choreography

How can I practice Preact-motion typing speed?

CodeSpeedTest offers 10+ real Preact-motion code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Learn Preact-motion - 10 Code Examples & CST Typing Practice Test

Code Sample Descriptions

Simple Fade In

# preact_motion/demo/App1.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ opacity: 0 }} style={{ opacity: 1 }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'red', opacity: style.opacity }} />
        )}
        </Motion>
    )
}

Fades a div in on mount

Let’s Try →

Scale Up

# preact_motion/demo/App2.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ scale: 0.5 }} style={{ scale: 1 }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'green', transform: `scale(${style.scale})` }} />
        )}
        </Motion>
    )
}

Scales up a div from 0.5 to 1

Let’s Try →

Fade + Scale

# preact_motion/demo/App3.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ opacity: 0, scale: 0.5 }} style={{ opacity: 1, scale: 1 }}>
        {style => (
        <div style={{ width: 120, height: 120, background: 'blue', opacity: style.opacity, transform: `scale(${style.scale})` }} />
        )}
        </Motion>
    )
}

Fades in and scales a div

Let’s Try →

Slide Right

# preact_motion/demo/App4.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ x: -100 }} style={{ x: 0 }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'orange', transform: `translateX(${style.x}px)` }} />
        )}
        </Motion>
    )
}

Slides a div from left to right

Let’s Try →

Slide Up

# preact_motion/demo/App5.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ y: 100 }} style={{ y: 0 }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'purple', transform: `translateY(${style.y}px)` }} />
        )}
        </Motion>
    )
}

Slides a div up from below

Let’s Try →

Rotate

# preact_motion/demo/App6.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ rotate: 0 }} style={{ rotate: 360 }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'cyan', transform: `rotate(${style.rotate}deg)` }} />
        )}
        </Motion>
    )
}

Rotates a div from 0 to 360 degrees

Let’s Try →

Scale + Rotate

# preact_motion/demo/App7.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ scale: 0.5, rotate: 0 }} style={{ scale: 1, rotate: 360 }}>
        {style => (
        <div style={{ width: 120, height: 120, background: 'magenta', transform: `scale(${style.scale}) rotate(${style.rotate}deg)` }} />
        )}
        </Motion>
    )
}

Scales and rotates a div

Let’s Try →

Fade + Slide Right

# preact_motion/demo/App8.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ opacity: 0, x: -100 }} style={{ opacity: 1, x: 0 }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'lime', opacity: style.opacity, transform: `translateX(${style.x}px)` }} />
        )}
        </Motion>
    )
}

Fades in while sliding right

Let’s Try →

Fade + Slide Up

# preact_motion/demo/App9.jsx
import { h } from 'preact'
import { Motion } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ opacity: 0, y: 50 }} style={{ opacity: 1, y: 0 }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'yellow', opacity: style.opacity, transform: `translateY(${style.y}px)` }} />
        )}
        </Motion>
    )
}

Fades in while sliding up

Let’s Try →

Bounce Scale

# preact_motion/demo/App10.jsx
import { h } from 'preact'
import { Motion, spring } from 'preact-motion'

export default function App() {
    return (
        <Motion defaultStyle={{ scale: 0.5 }} style={{ scale: spring(1, { stiffness: 200, damping: 10 }) }}>
        {style => (
        <div style={{ width: 100, height: 100, background: 'orange', transform: `scale(${style.scale})` }} />
        )}
        </Motion>
    )
}

Scales a div with a spring bounce effect

Let’s Try →

Frequently Asked Questions about Preact-motion

What is Preact-motion?

What are the primary use cases for Preact-motion?

Smooth, spring-based UI animations. Element transitions without CSS keyframes. Animated toggles and switches. Layout-based motion between states. Declarative dynamic value interpolation

What are the strengths of Preact-motion?

Very lightweight compared to Framer Motion or React Spring. Natural spring physics. Perfect for micro-interactions. Minimal API surface - easy to learn. Optimized for Preact performance

What are the limitations of Preact-motion?

How can I practice Preact-motion typing speed?

CodeSpeedTest offers 10+ real Preact-motion code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.