What you will learn

Animation

We look at all the possibilities of Framer’s animation API with the aid of 62 example animations.

An overview of the included examples

Most animations are created with simple boxes to clearly show how everything works with the least amount of code.

I provide the examples in two formats:

  • A code overrides version that uses frames drawn on the canvas
  • The same animation as a code component, built with motion elements (like, e.g., <motion.div>)

Plus, there’s a code component version of each example in a CodeSandbox:

A04 – Transform origin
A06 – Complex values

Some of the things that we cover:

Animation sequences

With the useAnimate() and useAnimationControls() hooks (and also with keyframes), you can create a sequence of animations.

H03 – Sequence
H04 – Sequence with pauses

Animating child frames with variants

Child frames can animate automatically, following their parent, and you can orchestrate these child animations (change the delay between children, the animation direction, etc.).

D02 – Propagation
D03 – Orchestration 1

Tweaking keyframe animations

You can change each keyframe’s animation duration and give them different animation types (easing curve, spring,…).

The first three keyframes take a second, and the last one takes three seconds.
The three animations sequence nicely because each ease ‘out’ is followed by an ease ‘in’.

Animate elements before they’re removed

Framer Motion’s Animate Presence adds something new to React: the possibility to animate elements just before they’re removed from the screen.

Just adding and removing bars makes them animate automatically.
Animating an element in and out by changing its key (slowed down)

Animatable properties

I included examples of how to animate every possible property.

Layout animations

With the layout property, elements will animate automatically whenever you change their dimensions or position. And withlayoutId, you can animate between entirely separate elements.

Simply changing the knob’s position triggers an animation.
The colored backgrounds are separate elements. Framer Motion automatically animates between them.
A layout animation handles the boxes, while a standard animation changes the background.

Here layout animations are combined with a common background animation.

When the big picture is added, its thumbnail version is automatically hidden.

Simply adding the div with the bigger picture makes it grow automatically from the thumbnail’s position—while the thumbnail is temporarily hidden.

Layout Group

With the <LayoutGroup> component, you can sync layout animations across a set of elements.

There’s no animation when the children move position or when the parent must change its height.

Here’s an example without a layout group: When you tap an element, its siblings will not animate to their new position, and their parent also doesn’t animate to a new size.

Sibling boxes now animate to make space, and the parent fluidly resizes when it needs to grow or shrink.

The <LayoutGroup> wrapper component tracks the layout changes of all elements and has them animate together.

All the boxes now animate to their new position, and their parent also resizes fluidly.

SVG animations

There are many SVG elements, and most of their attributes are animatable. You can, for instance, animate the values of a radial or linear gradient:

The <motion.radialGradient> applied to this <motion.circle> animates in concert with the circle’s position.
Animating a linear gradient’s start and end points

You can animate the shape of an SVG path:

A keyframe sequence between five different path shapes
Four separate paths can form the arcs of a circle.

… but also an SVG path’s offset and length. For example, the animated React logo at the top of this page is a sequence of three animations (and an extra one that continuously rotates the logo).

Shortening the pathLength while moving the pathOffset forward
Changing pathOffset makes the dash travel along the path.
The pathLength grows to 100% with an "easeOut" animation.
The whole SVG rotates continuously (and the gradient also animates).

 

There’s more

Next to the examples used to explain everything, there are another 35 animation examples that you can check out for free.