Fade + Scale - Preact-motion Typing CST Test
Loading…
Fade + Scale — Preact-motion Code
Fades in and scales a div
# 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>
)
}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.