Declarative animations and gestures for interfaces that feel alive.
Framer Motion, now simply called Motion, makes animations and gestures in React declarative and surprisingly performant. Instead of laboriously scripting individual steps, you just describe how something should behave and the library does the rest. Transitions between states, drag gestures and entrance animations come almost for free. So you give interfaces life and character without sacrificing accessibility or load time.
More in the documentationWe bring Motion in when an interface should feel more alive through subtle movement, from gentle entrances to transitions between views. Because you describe animations rather than scripting them, the code stays readable and easy to maintain. On a marketing site in particular, that makes the difference for storytelling.
import { motion } from "motion/react";
export function Card() {
return <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />;
}Good to know
Mind users who prefer reduced motion. With the useReducedMotion hook you dial animations back for them, which serves accessibility and comfort at once.
More tools we work with in the same area.
React
Our preferred UI framework for interactive, component-based interfaces.
Next.js
The React meta-framework for SSR, routing and top-tier performance.
Angular
A structured framework for large, long-lived enterprise applications.
Vue
A lean, approachable framework for fast, reactive UIs.
Svelte & SvelteKit
A compiled framework for especially lean, fast interfaces.
Astro
Content-focused sites with minimal JavaScript and top performance.
You don't have to decide that, it's our job. Tell us about your plans.