Animation

When Framer X launched in September 2018, its animations worked differently and were still limited compared to what we had in Framer Classic. (There’s more about that earlier animation API in the Archive.) So it was an excellent idea of Framer to acquire Popmotion. Framer’s current animation API — based on Popmotion — is much more potent than what we had in Framer Classic. And since the launch of Framer Motion, we can now use these same animations in production — on a live React website.

The animate and transition properties

The bread and butter of the animation API are two properties: animate and transition.

• With animate, you define what should animate (color, position, size, opacity…);
• With transition, you decide how it should animate (length of the animation, animation curve, with a delay, repeatedly…)

Triggering animations

The moment you pass values to a frame’s animate, things will start moving. But I suppose you won’t always want an animation to start the moment the prototype loads. There are two ways to trigger an animation with a user event (like a tap):

• With whileTap, whileHover, and whileDrag, you can add animations that will happen while the frame is being tapped, hovered over, or dragged;
• or you set up an animation with one of the hooks that you then trigger with an event handler like onTap() or onHover().

Or you use them both; that’s also possible. The same element can have ‘while’ animations and triggered animations.

Which layers are animatable?

The animation API works with Framer’s native layers like frames, stacks, scrolls, or page components, so with most things that you can draw on the canvas. You can’t animate a graphic, though (notice that you can’t apply an override to one), but that’s easily solved by wrapping it in a frame.

You can apply an override to a Text layer, but it will not animate. Here the same solution applies: just wrap it in a frame.