When Framer X launched in September 2018, its animations worked differently and
So it was an excellent idea of the Framer team to
The bread and butter of the animation API are two special properties:
animate, you define what should animate (color, position, size, opacity…);
transition, you 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 (like 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 hooks, that you then trigger with an event handler like
onTap ( )
onHover ( )
Or you use them both; that’s also possible. The same element can have ‘while’ animations and triggered animations.
You can’t animate a graphic (notice that you can’t apply an override to them), 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.
When using a common HTML element (like a
<div>), know that you can make it animatable by turning it into a Motion element (e.g. a