What you will learn

Code Overrides

Overrides are bits of code that you apply to layers 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, plus has ‘while hover’, ‘while tap’, and ‘while drag’ animations

Add animations

With overrides, you can animate layers 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)

Add interactivity

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

You can put the bits of data they need to share in CreateStore.

Separate frames on the canvas communicating through a data store

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 data store.

Connect code components

Framer includes a set of built-in components, and you can add many others. With overrides, you can change their properties dynamically or let them change other elements on the screen.

Drag the slider to change the Arconic’s length.

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

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

Here Framer’s Radio Buttons change the properties of a component from Kirill Morozov’s ‘Charts’ package. The charts’ values are saved in a CreateStore data store.

Build your own code components

Learn how to build your own React components for use in Framer projects.

 

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 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

Compatibility

How to make your component work well inside other code and smart components and with code 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

You can use a versatile component like this in any prototype, and you can add it to your Team Library.

Animation

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

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 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 35 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 div with the bigger picture makes it grow automatically from the thumbnail’s position—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 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).

Dragging

With a simple override, you can make any layer 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).

Code Overrides

Overrides are bits of code that you apply to layers 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, plus has ‘while hover’, ‘while tap’, and ‘while drag’ animations

Add animations

With overrides, you can animate layers 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)

Add interactivity

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

You can put the bits of data they need to share in CreateStore.

Separate frames on the canvas communicating through a data store

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 data store.

Connect code components

Framer includes a set of built-in components, and you can add many others. With overrides, you can change their properties dynamically or let them change other elements on the screen.

Drag the slider to change the Arconic’s length.

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

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

Here Framer’s Radio Buttons change the properties of a component from Kirill Morozov’s ‘Charts’ package. The charts’ values are saved in a CreateStore data store.

Build your own code components

Learn how to build your own React components for use in Framer projects.

 

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 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

Compatibility

How to make your component work well inside other code and smart components and with code 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

You can use a versatile component like this in any prototype, and you can add it to your Team Library.

Animation

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

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 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 35 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 div with the bigger picture makes it grow automatically from the thumbnail’s position—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 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).

Dragging

With a simple override, you can make any layer 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).