Skip to content
Submit Library
Library
Animation

Motion

Modern animation APIs for layout, gestures and transitions.

UnverifiedActive

Unverified

Compatibility has not been verified yet in the PreactHub catalog.

Packagemotion

Facts at a glance
Preact compatibility
Unverified
Tested Preact versions
Not documented
TypeScript
Native TypeScript
SSR
SSR supported
Maintenance
Active
License
MIT
Last verified
Not yet verified
Terminal
npm install motion
Preact example
import { motion } from "motion/react"; export function FadeIn() {  return <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />;}

Introduction

Motion is the successor to older Framer Motion distribution patterns and remains interesting for interactive UI transitions.

Preact configuration

Verify the exact Preact integration path before relying on it in production.

SSR notes

Animation-heavy libraries should be reviewed for server/client rendering parity.

Islands notes

When using this library inside an island, keep browser-specific setup inside the island component or an effect, and pass only serializable props from the server-rendered page.

Alternatives

Browse more in Animation or explore the full library directory.