Motion PC表示
Motion タブレット表示
Motion スマホ表示

Motion (prev Framer Motion) is a fast, production-grade animation library for React, JavaScript and Vue. Build smooth UI animations at a tiny footprint.

Skip to content Motion DOCS DOCS EXAMPLES EXAMPLES AI KIT AI KIT MOTION+ MOTION+ Motion is deployed and sponsored by the best teams in the industry The animation library loved by humans and agents alike. Layout, scroll, gestures, 3D, and hardware acceleration for React, Vue and JavaScript. Free and open source. Previously Framer Motion. npm install motion && npx motion-ai GET STARTED GET STARTED LEARN MORE Small APIs. Expressive interfaces. It only takes a few lines of Motion to bring an interface to life in React, JavaScript or Vue. Learn once, build anything. RUNWAY BACKSTAGE OBJECTS Layout animations Animate changes to size, position and order that CSS can’t, even from one component to another, with fast transforms. setOpen(id)} /> {open && } LAYOUT DOCS LAYOUT EXAMPLES Gesture animations Gestures that feel native. Press works from the keyboard, hover ignores touch, and drag throws with momentum. GESTURES DOCS GESTURES EXAMPLES 0% Scroll animations Link any value to scroll progress. Motion uses the browser’s ScrollTimeline when possible for smooth, hardware-accelerated scroll effects. const { scrollXProgress } = useScroll({ container }) SCROLL DOCS SCROLL EXAMPLES Stiffness 200 Damping 18 Mass 1 Spring animations Physics springs that carry velocity. A value follows its target with real stiffness, damping and mass, and stays fluid when the target moves again mid-flight. const x = useSpring(0, { stiffness: 200, damping: 18, mass: 1 }) const y = useSpring(0, { stiffness: 200, damping: 18, mass: 1 })
{ x.set(e.clientX); y.set(e.clientY) }}>
SPRINGS DOCS SPRINGS EXAMPLES Hardware acc

関連サイト