Bounce Scale - Preact-motion Typing CST Test
Loading…
Bounce Scale — Preact-motion Code
Scales a div with a spring bounce effect
# 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>
)
}Preact-motion Language Guide
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.
Primary Use Cases
- ▸Smooth, spring-based UI animations
- ▸Element transitions without CSS keyframes
- ▸Animated toggles and switches
- ▸Layout-based motion between states
- ▸Declarative dynamic value interpolation
Notable Features
- ▸Physics-based springs
- ▸Declarative Motion component
- ▸StaggeredMotion for chained animations
- ▸TransitionMotion for dynamic lists
- ▸Automatic value interpolation
Origin & Creator
Preact Motion was inspired by React-Motion and built by Preact community members to provide a native physics-based animation library optimized for Preact’s small size.
Industrial Note
Highly relevant for ultra-lightweight dashboards, embedded UIs, IoT interfaces, static sites, WASM/Preact projects, and performance-critical mobile web apps where bundle size must remain extremely small.