What you will learn

Overrides

Overrides are bits of code that you apply to elements on Framer’s canvas. With them, you can use Framer’s full animation API and let frames, smart components, and code components talk to each other.

 

Fades in when appearing + ‘while hover’, ‘while tap’, and ‘while drag’ animations

Add animations

With overrides, you can animate elements without having to add extra screens for each animation state.

Create animation sequences, keyframe animations, animations that cycle, staggered animations, and many more.

 

A single override gave this box four animations: When it appears, when you hover over it, when you pick it up, and when you drag it. (View the code)

Frames on the canvas communicating through a Data object

Add interactivity

Make elements on your canvas talk to each other, whether they’re frames, smart components, design components, or code components.

You can put the bits of data they need to share in a Data or CreateStore object.

Enhance smart components

With overrides, you can change a smart component’s variables and have it animate between different variants.

 

This example has three smart components:

  • The ‘Good Morning’ button
  • The ‘Good Night’ button
  • The lamp button

The Good Morning and Good Night buttons can flip the lamp buttons, while the lamp buttons also work independently. The values for the good morning and good night states are saved in a CreateStore object.

Connect code components

Framer includes a set of default components, and you can add many more to your project. With overrides, you can change their properties dynamically or let them change other elements on the screen.

A simple example: I used Framer’s default Slider to change the Arconic component’s length property.

Framer’s radio button’s change the values used for the chart.

Here Framer’s Radio Buttons change the properties of one of the Charts in Kirill Morozov’s package. The charts’ values are saved in a CreateStore object.

Build your own code components

We’ll look at how to build your own React components for use inside Framer.

 

Starting from scratch

We start with the simplest possible component.

import * as React from "react"

export function My_first_component_01() {
    return <h1>Hi there!</h1>
}
import * as React from "react"
import { addPropertyControls, ControlType } from "framer"

const myStyle: React.CSSProperties = {
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    background: "#0099ff",
    color: "White",
    fontSize: 16,
    fontWeight: 600,
}

export function My_first_component_06(props) {
    return <div style={myStyle}>{props.myText}</div>
}

My_first_component_06.defaultProps = {
    myText: "Change my text!",
}

addPropertyControls(My_first_component_06, {
    myText: {
        type: ControlType.String,
        title: "Text",
    },
})

Building it up

Step by step, we add bits of code until the component has CSS styling, a default property, and a property control to change its text.

Property controls

That simple component above has a String property control, but there are also other types: Color, Image, Number, File, Boolean, Enum, Fused number, Event handler, Transition, and Component instance. We look at examples for all of them.

Examples for every kind of property control
Prototypes that demonstrate possible compatibility issues

Divs vs. Frames and compatibility

Why and when you’ll want to use <frame>s instead of <div>s, and how to make your component work well inside other components and with overrides.

Make it smarter

In Smart Code Components, we let components share their internal state and react to property changes.

A full-fledged component

We apply the gathered knowledge by creating an iOS segmented control component.

Ten iterations to get to the finished component

We build it step by step, adding state, animations, resizability, and even some TypeScript.

The control sharing its selected segment through an override

The finished component knows how to share its internal state (the currently selected segment).

The three top controls change the properties of the bottom one.

And we make sure that it responds to changes from the outside so that you can change its mode, options, and selected segment at any time.

Use it everywhere

This kind of versatile component can be used in any prototype. You can publish it as a public package (as I did with this Segmented Control) or a private team package.

Animation

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

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

Where possible, I provide the example in three formats:

  • An overrides version that uses frames drawn on the canvas
  • The same animation as a code component, built with Framer’s <Frame> elements
  • And once more as a code component that uses Framer Motion (with <motion.div> elements)

 

Plus, there’s a Framer Motion version of each example in a CodeSandbox:

A04 – Transform origin
A06 – Complex values

Some of the things that we cover:

Animation sequences

With the useAnimation() hook (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, together with 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, the last one 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.

F03 – Multiple children
F05 – exitBeforeEnter & initial false

Animatable properties

I included examples of how to animate every possible property.

 

There’s more

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

Framer Motion

Most of Framer Motion’s API we already cover in Animation, so in the Framer Motion section, we look at some other things:

  • How to build a React website locally on your computer; or in the browser with CodeSandbox.
  • Framer Motion’s automatic layout animations and shared layout animations
  • The code differences between Framer and Framer Motion
  • How to make animations follow the scrolling of a page
  • SVG animations
  • Using React Router to animate between pages (different URLs on your website)

Making a React website

We install Node.js and use the Create React App package to build a React website on your computer.

Create React App’s default page
CRA’s page with some Framer Motion animations

Layout animations

With the layout property, elements can 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 common animations to recreate this Magic Motion example in code.

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

Simply adding the bigger photo makes it grow automatically from the position of the thumbnail, while the thumbnail is temporarily hidden.

Scroll-driven animations

You can bind animations to a webpage’s scroll position.

Using useViewportScroll()’s scrollXProgress and scrollYOpen in a new tab

Scrolling this page changes:

  • The length of the SVG Path in the top right (+ value inside it)
  • The position of the gradient box (using CSS’s calc())
  • Its gradient
  • The box’s border radius
  • The scroll distance (scrollY) value at the bottom of the screen

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 of five different path shapes.
Four separate paths can form the arcs of a circle.

… but also an SVG path’s offset and length. 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).

Dragging

With a simple override, you can make any frame draggable.

All the settings

With some more code, you can set possible drag directions, keep the draggable frame in an area, or tweak the inertia animation that starts when you release it. We look at all the possible settings.

Snap to grid with modifyTarget()

Snap to grid

Dynamically change the endpoint of the inertia animation to make the frame always move to one of the points on a grid.

Snap to corner with onDragEnd()

Snap to corner

With the onDragEnd() event, you can animate the frame to the nearest corner when it’s released (or the corner you threw it to).