Rotate - Preact-motion Typing CST Test
Loading…
Rotate — Preact-motion Code
Rotates a div from 0 to 360 degrees
# 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>
)
}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.