Introducing Framer MotionIntroducing Framer Motion

Framer Motion is a new open source, production-ready motion library for React on the web.

July 10, 2019

From a pure prototyping standpoint, Framer has always been ideal for designing advanced animations and gestures. From common interface flows like scrolling and paging to physics-based animation and touch-based gestures, the ability to invent and iterate is at the core of our product experience. This unparalleled flexibility is powered by Framer Motion, our JavaScript library for production-ready animations. And today, we’re making Framer Motion available to the greater design community as an open-source animation library.

Framer Motion is particularly powerful because it solves another huge problem in design: handoff. Designers often spend days perfecting animations down to the last spring, only to find that the finer details get lost during development. By using the same animation library in prototyping and production, you’re now guaranteed a truer and more efficient way to ensure your animations are always one-to-one.

It’s also worth noting that Framer Motion is the successor to the popular Pose library, which generates nearly 80k downloads a month on NPM. It’s also based on Popmotion, a library that has been battle-tested in the wild for almost four years. If you already use Pose, Framer Motion offers a simpler and more flexible API at roughly the same bundle size.

In this post, we’ll take a whirlwind tour of some of Framer Motion’s biggest features.

Simple animations

Animations are driven by Framer Motion’s versatile animate prop. It can cater for the very simplest, and most advanced use-cases.

It can accept an object of values that, when changed, the motion component will automatically animate to with a snappy transition.

<motion.div animate={{ x: 100 }} />
COPY

This transition can be optionally configured using Popmotion’s familiar tween, spring and inertia animations.

<motion.div animate={{ x: 100 }} transition={{ duration: 2 }} />
COPY
Open example in CodeSandbox ›

Keyframes

Each value in animate can also be set as an array to define keyframes that Motion will animate through in sequence.

<motion.div animate={{ scale: [1, 2, 1] }} />
COPY
Open example in CodeSandbox ›

Variants

Framer Motion also retains Pose’s most powerful feature, the ability to orchestrate complex animations across large React trees just by toggling a single prop. By defining variants on a set of components, providing a variant label to animate will propagate this animation through all the children.

Open example in CodeSandbox ›

Gesture animations

Framer Motion also extends React’s native event handling by supporting the recognition of pan, hover, tap, and drag gestures.

Powerful while props allow motion components to temporarily animate to new positions while a gesture is active.

<motion.a whileHover={{ scale: 1.1 }} />
COPY
Open example in CodeSandbox ›

Drag gesture

The simple-yet-powerful drag API allows you to easily make a component draggable on one or both axis, define elasticated boundaries, and enable direction locking.

<motion.div drag="x" />
COPY
Open example in CodeSandbox ›

MotionValues

Framer Motion uses MotionValues to track the state and velocity of every changing value, without triggering React renders. It creates these automatically, so you don’t have to.

But for advanced control, you can create MotionValues yourself and form interesting declarative relationships between them via the useTransform and useSpring hooks. Combined with Framer Motion’s animations, gestures, and SVG support, dynamic effects can be created with very little code.

Open example in CodeSandbox ›

Ready to go

Framer Motion may be a new library, but it’s ready to power the web. It enjoys over 90% test coverage, and has served in Framer X since the Playground Beta at the start of the year.

With Framer Motion, we’ve tried to build an API that designers will love for prototyping and developers will actually want to use in production. To help you along, we’ve made sure to include in-depth documentation to ensure designers can start playing around today.

For even more examples and information about more of Motion’s advanced features, like server-side rendering, CSS variable support, layout transitions, and a simple SVG path API, checkout the new landing page and docs.

Like this article? Spread the word.

Want more design articles?

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.