Learn PREACT-MOTION with Real Code Examples

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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