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 Motion’s animation API and let frames, canvas components, and code components talk to each other.
Add animations
With overrides, you can animate layers without adding 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, canvas components, or code components.
You can put the bits of data they need to share in a CreateStore data store.
Enhance canvas components
With overrides, you can change a canvas component’s variables and have it animate between different variants.
This example has three canvas 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 has built-in code components, and you can add others. With overrides, you can change their properties dynamically or let them change other elements on the screen.
A simple example: A Toggle starts and stops Framer’s Ticker component.
In this example, Framer’s Page component makes a Progress component show how far you’ve advanced through the set of pictures.
And the text under the Page component changes depending on the current picture.
Here you can adjust the colors of Framer’s Conic component with Sliders.
Plus: You can change the center point of the Conic’s gradient by tapping it.
Build your own code components
Learn how to build React components for use in Framer projects.

import { addPropertyControls, ControlType } from "framer"
const myStyle: React.CSSProperties = {
height: "100%",
background: "#09f",
// Text
color: "White",
fontSize: 16,
fontWeight: 600,
// Flexbox
display: "flex",
alignItems: "center",
justifyContent: "center",
}
export default 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",
},
})
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.


Component styling
We look at the different ways of adding CSS styles to your components: Writing properties inline, putting them in an object, injecting CSS with a <style>
tag, or using CSS-in-JS libraries like Styled Components, Emotion, and Stitches.
Component sizing
How to make your components resizable, work well with Framer’s auto-sizing, plus some mistakes you best avoid.


Motion-compatibility
Make your components react to Framer Motion properties. This way, they can be animated with an override and will respond to whileTap
, whileHover
, and other events.
Make it smarter
In Smart Code Components, we let components share their internal state and react to property changes.

Importing other layers, components, and packages
You can enhance your code component by importing other components: canvas components, Framer’s built-in components, components from an existing design system, or a JavaScript library that offers extra functionality.
Importing Framer components
Using JavaScript, Framer’s Time & Date component will always show the current time (or date). I used it here in a recreation of the iOS status bar.
This iOS status bar component has a property control to let you select between Light and Dark modes. The reception, WiFi, and battery icons are SVGs in an (also imported) canvas component with ‘Light’ and ‘Dark’ variants.
Adding a JavaScript library
In this example, I imported the Lodash library of JavaScript utilities and used its flattenDeep()
function to clean up a messy array.
Using components from an existing design system
Thanks to Framer’s possibility to import packages directly from NPM, you can reuse existing components. This is a bit more difficult because you might want to:
- Give a component Property Controls so that you can change how it looks directly in the Properties Panel
- Make it Motion-compatible (possible with the three design systems I tested)
MUI
I tried a few components from the main Material UI library:
- A Button (made Motion-compatible so that it works with, for instance, a
whileHover
) - A Rating component
- Radio buttons
- A configurable Slider

Chakra UI
And here are some example components from the Chakra UI library.
- A Button (also made Motion-compatible)
- A set of Tabs with content
- A Popover
- Bottom of the page: A set of ‘Skeleton’ components that have a ‘loading’ state

React Bootstrap
You probably know Bootstrap, a CSS toolkit to quickly build a website. Well, React Bootstrap is the same, but then as React components.
- A Button (you can make React Bootstrap’s components also Motion-compatible)
- A Modal that works with a full-page backdrop
- React Bootstrap’s Carousel component
A full-fledged code component
We apply the gathered knowledge by creating an iOS segmented control.

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

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

And we ensure 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 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:
Some of the things that we cover:
Animation sequences
With the useAnimationControls()
hook (and also with keyframes), you can create a sequence of animations.
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.).
Tweaking keyframe animations
You can change each keyframe’s animation duration and give them different animation types (easing curve, spring,…).
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.
key
(slowed down)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.
Motion Values
Framer’s animations work with so-called Motion values in the background, independently of React.
You can extract them from an animation and transform them, and you’ll often use them to make an animation follow a drag or scroll movement.
An example of reusing Motion values: The big box has a whileTap
animation whose values I extracted to animate the rotate
, scale
, and backgroundColor
of the smaller boxes.
Motion values work independently of React. Here’s an example of using ‘state’ (like, e.g., React’s useState()
) to change the width of the panels: It doesn’t work as smoothly, and you can’t ‘throw’ the handle.
And here’s a version that uses Motion values: It works much smoother because the animation works independently of React; no React state updates (resulting in a reload) are needed.
The handle’s position gets transformed to width values for the panels with useTransform()
.
Another example of the useTransform()
hook.
Here a Scroll component rotates the boxes on the left: Scrolling 200 pixels results in a 360º rotation.
Plus, as you can see, you can clamp values or add an easing.
A Page component has the same Motion values as a Scroll. Here its horizontal scroll value, contentOffsetX
, is used to animate the boxes on the pages.
Scroll-driven animations
With Framer Motion’s useScroll()
hook, you can track a web page’s scrolling in three different ways:
- Track the scrolling of the entire page — Page scroll
- Track a scrollable element within the page — Element scroll
- Track where an element currently is in the viewport — Element position
This works in React projects directly in a component, and on Framer Sites pages, you can use code overrides.
Page scroll
Scrolling this page changes:
- The length of the SVG Path in the top right (+ the value inside it)
- The position of the box (using CSS’s
calc()
function) - Its gradient (we’re interpolating between two different
linear-gradient()
s) - The box’s border radius (the box becomes a circle and then again a box)
- The scroll distance value at the bottom of the screen
Element position
There’s a third way to use useScroll()
: Elements can track where they are in the browser’s viewport.
Here each picture’s position is used to change its size, opacity, and blur.
Plus, the name of each Buenos Aires barrio has its own effects: its x-position, opacity, and text shadow change.
Animating Motion values
With the animate()
function, you can, well,… animate a Motion value. And whatever that Motion value is attached to will follow along.
Animating a Scroll component
Here we’re animating a Scroll with different transition
settings:
- Animating to the top with a duration of 1 second.
- Animating to 200 using a ‘default spring’ with some extra stiffness.
- Scrolling to 400 with a ‘duration-based spring’.
- And to 600 with a custom Bézier curve.
Springy Motion values
With the useSpring()
hook, you can create Motion values that will animate to a new value with a spring animation.
You usually create a Motion value with useMotionValue()
, but you can also use useSpring()
, and then it will be… springy.
Here ‘Rotate’ uses the default useSpring()
settings, and ‘Scale’ got some extra stiffness.
You can use the same useSpring()
hook to transform a standard Motion value into a bouncier one.
Here, ‘Rotate’ and ‘Scale’ are first converted to horizontal position animations and then made bouncier.
Framer Motion
Most of Framer Motion’s API we already cover in Animation and Motion Values, 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
- 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.
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.
Here layout animations are combined with a common background animation.
Simply adding the div with the bigger picture makes it grow automatically from the thumbnail’s position—while the thumbnail is temporarily hidden.
With the <LayoutGroup>
component, you can sync layout animations across a set of elements.
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.
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:
<motion.radialGradient>
applied to this <motion.circle>
animates in concert with the circle’s position.You can animate the shape of an SVG path:
… 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).
pathLength
while moving the pathOffset
forwardpathOffset
makes the dash travel along the path.pathLength
grows to 100% with an "easeOut"
animation.Routing
The below examples are (mini) websites made in React in which a ‘router’ (here: React Router) shows only one page at a time.
Using a web API
We create two versions of an icon component that gets its SVG icon from a database on Airtable using their API.


Selecting a custom color with the component’s property controls.
Dragging
With a simple override, you can make any layer draggable.

modifyTarget()
onDragEnd()
#SoLongAndThanksForAllTheFish – #Starman
… and you can also use drag controls to create a trackpad in a space game.