Animation

When Framer X launched in September 2018, it’s animations worked differently, and were limited compared to what was possible in Framer Classic. (You can read about the former animation API in the Archive.)

So it was an excellent idea of the Framer team to acquire Popmotion. Framer’s current animation API — based on Popmotion — is more much more powerful than what we had in Framer Classic. And also: it’s declarative (compared to imperative), so more at home in React.

Since the launch of Framer Motion, you can now also use these same animations in production, on a live website.

Sure, some things are still missing, like, e.g. (links to the Classic book): animating gradients, setting and animating different text properties, and some events, like double-tap, long press, swipe, and multi-touch gestures (pinchable Frames). But we’ll probably see most of that arrive in the upcoming months.

The animate and transition properties

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

• With animate you define what should animate (color, position, size, opacity,…);
• and 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’ll not always want an animation to start the moment the prototype loads.

There are two ways to trigger an animation with a user event (like, e.g., a tap):

• With whileTap and whileHover, you create an animation that will happen while the Frame is being tapped or hovered over;
• 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 do both things at the same time, that’s also possible.

Only Frames

One more thing: The animation API only works with Frames.

Anything you draw on the Canvas is a Frame anyway, so this is only important for Code Components where you might want to turn a div into a Frame in order to animate it (or you wrap the div in a Frame).

By the way, a Graphic will also need to be wrapped in a Frame (notice that you can’t apply an Override to a Graphic).