Scale + Rotate - Preact-motion Typing CST Test
Loading…
Scale + Rotate — Preact-motion Code
Scales and rotates a div
# 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>
)
}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.