Animation
When Framer (then X) launched in September 2018, its animation API was limited compared to what we had in Framer Classic. Fortunately, Matt Perry, the maker of Popmotion, joined the Framer team in Amsterdam. He created Framer Motion, Framer’s versatile animation library that you can also use in production—in a React web project.
The animate
and transition
properties
The bread and butter of Framer Motion 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 or motion element’s animate
, things will start moving. But I suppose you don’t always want an animation to start the moment the prototype loads. So there are ways to trigger an animation with a user event (like a tap):
- With
,whileTap
, andwhileHover 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
oronTap ( )
.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 Framer Motion animation API works with most things you draw on the canvas: frames and canvas components ( archived version), but also stacks, prototyping scrolls , and prototyping page components .
You can’t animate a Graphic, though (you can’t attach an override to it), 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. (You can only update its text
.) Here the same solution applies: wrap it in a frame.
Will overrides with animation properties work on code components? Sometimes, but you can also always just wrap them.