Framer Motion

What is Framer Motion?

Framer Motion is an animation library for React. It lets you describe how elements move, fade, and respond to interaction using a declarative API, so you write what an animation should look like rather than manually stepping through frames. A single motion.div with an animate prop replaces a stack of CSS keyframes and JavaScript timing code.

It came out of Framer, the design tool, and was open-sourced as a standalone React library. In 2024 it was renamed Motion and broadened to support vanilla JavaScript and other frameworks, though most people still call it Framer Motion. It handles the hard parts of motion well: spring physics that feel natural, gestures like drag and hover, layout animations that smoothly transition elements when the DOM rearranges, and orchestrated sequences across many components. A product team adding a satisfying transition when a card expands into a full panel would typically reach for its layout animation feature.

It competes with React Spring and with hand-rolled CSS. CSS is lighter when you only need a simple hover or fade. Framer Motion earns its weight once interactions get coordinated, interruptible, or tied to component state.

Framer Motion at Dallonses

We use Framer Motion when motion is part of how an interface communicates, not decoration sprinkled on at the end. Good animation tells a user where something came from and where it went. We bring it into web development and design work together, so the engineers building the transition and the designers shaping it are reading from the same intent.

We keep it restrained. Motion that fights the user or slows down a flow is worse than none, so we test it on real devices and cut anything that drags. When a partner wants an interface that feels alive without feeling busy, this is usually the tool we reach for.

Want motion that guides instead of distracts? Let's design it together.

Talk to us about UI