Introduction

When Framer (then called Framer 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.

Framer and Framer Motion

Framer Motion is an animation library that you can use in a React project, and Framer uses it for all its animations.

If you only want to use Framer Motion in a React project, check out my other course, The Mighty Framer Motion Guide.

Code Components

The code components you create in Framer are React components.

In fact, everything you create in Framer becomes a code component, even a simple frame you draw on the page or canvas. And, of course, canvas components (now called ‘components’) get converted into code with their variables (properties) and different states (variants).

Creating code components allows you to do anything possible in front-end web development, such as getting data from a web API or using NPM libraries. You can also give them property controls to define how they should look or work.

You’ve already used code components. Many things in the Insert menu, such as Framer’s Stack and Grid components, are made with code.

Code Overrides

A code override only works inside Framer; it doesn’t exist in React.

You connect a code override to an element on the webpage or canvas to give it custom animation or to let it talk to other elements.

You can attach a code override to a canvas component to dynamically change its Variants or Variables or let another element change this. Code overrides also work with code components.

When to write code

Sometimes, you need to write some code in Framer, like when you want to:

• Create animations that are not possible with Framer’s built-in tools:
  • Like, for instance, SVG animations.
  • Or creating keyframe animations.
  • Orchestrating child animations with variants.
  • Or to create exit animations that happen just before an element disappears.
  • Using a duration-based spring in an animation.
  • To make repeating animations.
  • Or create a sequence of animations ( thread on X).
  • Or staggered animations ( thread on X).
  • Or a combination of gesture animations.
  • Or a layout animation where an item transforms into another item or temporarily disappears.
  • To create layout animations that happen concurrently.
  • To create custom animations when you scroll the page ( thread on X).
• Or to let different elements talk to each other with Code Overrides ( thread on X).
• Or to create a code component:
  • That has property controls so you can change how it looks or behaves.
  • One that can be animated and works well with code overrides and other components.
  • Imports canvas components, other code components, or NPM libraries, such as a design system ( thread on X).
  • Or a code component that gets its information from a server ( thread on X).
• Or simply to make items draggable.
• Or to make a list of items you can reorder ( thread on X).

Triggering animations

Things will start moving when you pass values to a frame or motion element’s animate. But you don’t always want an animation to start when the prototype loads. So, there are ways to trigger an animation with a user event (like a tap):

• With whileTap, whileHover, and whileDrag, you can add animations that will happen while the frame is being tapped, hovered over, or dragged;
• You can also set up an animation and trigger it with an event like onTap() or onHover().

You can also use them both. 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, including frames and canvas components, stacks, and grids.

You can’t animate a Graphic (Framer’s version of an SVG), though. You can’t attach an override to it but you can solve this 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 property.) Here the same solution applies: wrap it in a frame.

Join the Mighty Guides mailing list    ( ± 6 emails/year )

Click the checkbox to allow us to send you emails.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing per their Privacy Policy and Terms.

Leave this field empty if you're human: