Slide Up - Preact-motion Typing CST Test
Loading…
Slide Up — Preact-motion Code
Slides a div up from below
# 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>
)
}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.