When Framer X launched in September 2018, its animations worked differently, and
So it was an excellent idea of the Framer team to
Since the launch of Framer Motion, you can now also use these same animations in production, on a live React website.
Sure, some things are still missing, such as (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 those arrive in the future.
The bread and butter of the animation API are two special properties:
animate, you define what should animate (color, position, size, opacity…);
- and with
transitionyou decide how it should animate (length of the animation, animation curve, with a delay, repeatedly…)
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 (for example, a tap):
, 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 hooksthat you then trigger with an event handler like
onTap ( )
onHover ( )
… or you can do both things at the same time; that’s also possible.
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 (or
motion.div) in order to animate it.
By the way, to animate a graphic you’ll also need to wrap it in a frame (notice that you can’t apply an override to a graphic).