Updates

May 18, 2023

Updated The useAnimationControls() hook is on its way out, so I made some examples use useAnimate() instead.

10. Animation sequence — One of the Example Animations
35. Swipe to delete — … and another one
Animation Types — The example project that shows the different easing curves and the one that lets you tweak a spring animation
Animating an SVG Path’s Stroke — The project in which I animate the ‘Create React App’ logo
Snap to Corner Example — In Dragging, the version that uses onDragEnd()

May 9, 2023

New This new way of manually starting animations will replace useAnimationControls() and also works with common HML and SVG elements (not only Motion elements).

The useAnimate() Hook

Here’s a Twitter thread about this new content with videos and links to online examples.

April 20, 2023

Updated Framer Motion 10 landed in Framer, so having something happen after animating a Motion value with animate() now works differently.

Animating Motion Values

April 12, 2023

Updated I added two different techniques to get the position of a draggable element.

Drag Events

April 1, 2023

Updated Framer’s prototyping Scroll and Page components stopped working with code overrides a few weeks ago. So, I made those Motion values examples now use the <Scroll> and <Page> components inside code components.

Updated I updated most links to React docs because the earlier React Beta docs are now on react.dev, their new official website.

March 8, 2023

Updated The Motion value’s onChange() function was deprecated in Framer Motion 10 (soon to arrive in Framer). So I updated examples to use on() and useMotionValueEvent() instead.

Updated I made the last remaining example animation also work in React 18 by adding variants with a custom property.

32. Animate Presence: Stack 3D

February 20, 2023

Updated

The useAnimationControls() Hook — Since Framer Motion 8.2.2. elements need to be mounted before you start an animation on them with useAnimationControls().
Animating an SVG Path’s Stroke — Update of a sequence that uses useAnimationControls() for the same reason.

February 11, 2023

Updated

CodeSandbox — Tiny update: When deploying a React project from CodeSandbox, Vercel doesn’t seem to stumble over the same build errors as Netlify and GitHub Pages.

January 25, 2023

New

Using a Web API — We create an icon component that gets its SVG icon from a database on Airtable.

Here are a few tweets with more info.

January 17, 2023

Updated

Updated the examples that used Twemoji with maxcdn.com, like on the pages Animate Presence and Property Controls > Enum.
Updated all links to the Framer Motion API docs because they moved from www.framer.com/docs to www.framer.com/motion.
Updated all links to the Framer for Developers docs because they moved from www.framer.com/docs/guides to www.framer.com/developers and were updated.

December 9, 2022

Updated

What you will learn — Extended; because there’s more to learn.

December 3, 2022

Updated

Animate Presence — Added the "popLayout" mode that you can use with layout animations.

A bit more about Animate presence’s modes on @framerbook.

December 2, 2022

Updated

Routing — Updated to React Router 6.4 and added explanations of the Animate Presence + React Router examples provided by Matt Perry.

November 30, 2022

Updated

The useAnimationControls() Hook — Apparently, this hook was renamed, but you can still write useAnimation() as well; both work.

November 21, 2022

New A section with everything about those Motion values that drive all animations in Framer.

Motion Values — The basics, comparison with using state, and how to display them
Chaining and Transforming Motion Values — Everything you wanted to know about useTransform()
Scroll-Linked Animations — How to do it in Framer Motion; and inside Framer with code overrides
Scroll Layers for Prototyping — The differences between native and non-native Scroll components
Animating Motion Values — Using the animate() function
Resetting a Motion Value — Motion values can be sticky; here’s how to reset them
Springy Motion Values — Bouncy Motion values with useSpring()

Here’s a Twitter thread about this new content with videos and links to online examples.

November 18, 2022

Updated

Animate Presence — Small update: exitBeforeEnter is now mode="wait".

November 3, 2022

Updated

Basic Overrides — Getting values like a frame’s current backgroundColor from its style object inside props doesn’t seem possible anymore, so examples that did this were removed.

September 8, 2022

The former ‘Importing Other Layers, Components, and Packages’ page is now a section with these pages:

New

Importing Smart, Code, and Framer Components — Working examples of importing these types of components.
NPM Examples: Design System Components — Examples of how to import different components from MUI’s Material UI, Chakra UI, and the React Bootstrap design systems.

Here’s a Twitter thread about this new content with videos and links to online examples.

Updated

August 15, 2022

New

Overriding Code Components — All examples now use Framer components (and a few self-created ones) instead of those from the older ‘public packages’. The former page is moved to the archive.

Here’s a Twitter thread about this new content with videos.

July 29, 2022

Updated

Component Styling — Correction: In the styled components examples using Stitches, the styled component was created inside the exported component. This can generate too many redraws.

July 24, 2022

Updated

Animate Presence — Small change: Made it work better with an override by spreading out the style object when cloning the element.

July 6, 2022

Updated

Component Sizing — There’s no more ‘component container’ on the canvas + user interface changes in Framer + added more images.

July 5, 2022

Updated

Flexbox Component — Got rid of the canvas version because Framer’s Stack now has wrapping. Added a Handshake import.

July 1, 2022

Updated

Property Controls > Component Instance — When changing an instance’s style properties by cloning it, you now need to spread out the existing props.

June 30, 2022

Updated

Drag Constraints — A layer’s width and height are no longer included in an override’s props, so we have to get them some other way. (In the ‘responsive slider’ example that reads the length of its track.)

June 29, 2022

Updated

Code Overrides — Something different now happens when you don’t pass the props in an override.
Basic Overrides — You can’t animate named CSS colors anymore + props are now organized differently in overrides attached to frames and smart components.
Sharing Data Between Overrides — Minor changes.
Overriding Smart Components — The ‘component container’ is gone, plus: a smart component’s props inside an override are now organized differently.
Motion-Compatible Components — The ‘component container’ that wrapped components on the canvas disappeared in Framer Sites.

June 24, 2022

Updated

The Animate Property — You can’t animate named colors in new (Framer Sites) projects or use older <Frame> properties like shadow instead of boxShadow.
Animate Presence — Some things work differently in new (Framer Sites) projects when using code overrides.
Animatable Properties — Animating width and height works a bit differently in new (Framer Sites) projects.

June 16, 2022

Updated

Customizing an Existing Component — Removed references to downloading Framer projects. (Which was still possible for a while after they removed it from the interface, but not anymore.)

June 3, 2022

Updated All pages

Some sections on framer.com were removed with the launch of Framer Sites:

I linked to new content on www.framer.com/learn/ where possible or to archived copies of pages on the Wayback Machine .

May 30, 2022

Updated

API Overview — Removed old links because of the removal of the legacy Framer docs + found copies on the Wayback Machine of the <Frame> and <Page> docs.

May 26, 2022

Updated

Routing — Updated for React Router 6

May 23, 2022

Updated

Importing Other Layers, Components, and Packages — Added the new, direct way to import NPM modules
Component Styling — More CSS-in-JS examples: Added five examples with (the original) Styled Components and one with Emotion’s version of styled components

May 11, 2022

Updated Lately, there seems to be a limit on how often you can update a useState() variable within a code override.

The useState() Hook — Throttled updates in the code override example that continuously tries to update state with an onPan() event
Animation Types — Used the updated version of Framer’s Slider (which internally throttles its updates) in the Spring settings example project

Updated The latest versions of Framer Motion can’t be deployed from CodeSandbox. So I added info on how to do it with an older version of Motion.

CodeSandbox

January 22, 2022

Updated

Automatic Layout Animations — Changes to how to customize layout animations
Layout Group — The replacement for the <AnimateSharedLayout> component
Layout ID — No more <AnimateSharedLayout> needed
API Overview — Added new properties, components, and events

December 29, 2021

New How to add CSS styles to your component: Writing them inline, using style objects, injecting CSS with a <style> tag, or using CSS-in-JS libraries.

Component Styling

Updated

November 30, 2021

Updated A completely reworked version of the iOS Segmented Control component: Framer for Developers compatible (no more <Frame> and <Stack>), simplified animations, layout animation, interaction triggers for use on the canvas.

November 22, 2021

Updated Apparently, it’s not always a good idea to share a state change initiated by a property change. Updated accordingly.

November 15, 2021

Updated All Stacks and Frames are replaced by divs + some minor updates.

November 11, 2021

New How use auto-sizing in code components, choose which sizing options users can select, etc.

Component Sizing

New How to make code components work with code overrides and inside other code components.

Motion-Compatible Components

Updated All Stacks and Frames are replaced by divs + different small updates.

October 28, 2021

Updated Updated for use with both native and non-native scrolls, and overrides are now in HOC format.

Animating to a Scroll Position

October 17, 2021

Updated Updated all code override and code component examples in the Dragging section.

October 13, 2021

Updated Updated the example overrides and those in the projects to HOC format.

Animation Types

September 29, 2021

Updated All code override and code component examples are updated. Plus: some things work differently (e.g., Animate Presence now works with overrides).

September 13, 2021

Updated Framer Motion 5 is not yet released but already used inside Framer. Some changes because of this:

33. Layout animation — Layout animations now do work with code overrides.
34. Swapping elements — Animations using layoutId don’t need to be wrapped inside an <AnimateSharedLayout>.
35. Swipe to delete — This example didn’t work because of a ‘draggable inside draggable’ bug. Earlier, they solved this bug in Framer Motion, and now the fix also landed in Framer.

September 12, 2021

Updated

Overriding Smart Components — Updated all overrides to HOC format + smart components now react to more events.
Overriding Code Components — Updated all overrides to HOC format.
API Overview — Added new properties + Framer Motion links (on all pages) now point to the new docs.

September 6, 2021

Added Everything about the new HOC overrides, how to read values from a layer, and how to share data between overrides with CreateStore.

August 25, 2021

Added A Flexbox-based component that you can use as a replacement for Framer’s <Stack>.

Flexbox Component

August 4, 2021

Added An overview of all the little things that changed with the introduction of Framer for Developers.

Framer for Developers

Here’s a Twitter thread with the same info—but more condensed.

July 24, 2021

Updated

Example Animations — The freely accessible set of 35 example animations is expanded with a few new ones and updated for Framer for Developers.

July 19, 2021

Updated

Minor, temporary fix: The API docs that were on www.framer.com/api are now at www.framer.com/legacy/docs. I updated all links to them.

July 1, 2021

Updated

Including Other Components — Updates because of changes in Framer and the discontinuation of the Legacy Framer Desktop application. More about importing NPM packages.
Customizing an Existing Component — Added: How you can still download a Framer project.

June 13, 2021

Updated I checked all example projects and CodeSandboxes for compatibility with the current versions of Framer and Framer Motion. Plus a minor update:

Overriding Smart Components — Smart components now have an ‘appear’ transition. No more need to use the Loader component.

April 19, 2021

Updated New logo, some layout changes, and moved The Classic book to a separate website.

April 7, 2021

Updated I checked all example projects and CodeSandboxes for possible changes introduced by Framer Motion 4. There were only a few:

The Transition Property — When defining separate transition settings for properties, you now also need to include delay.
The useAnimation() Hook — Dynamic start didn’t work a while because of a bug. Now it does again.
Animate Presence — Because of a minor bug, you had to add transition settings for exitBeforeEnter to work. That’s also fixed.
Recreating Magic Motion — Animating rotate now also works in layout animations (only skew doesn’t). And changing borderRadius now also works in a Layout ID animation.

I also embedded Framer prototypes in the pages where it was convenient.

March 15, 2021

Updated In Dragging: modifyTarget(), min, and max started to use absolute values in overrides a while ago. Apparently, it wasn’t the new normal, but a bug in the library that’s now fixed.

Modify Target
Min and Max
Snap to Grid Example
Snap to Corner Example
Drag Constraints — Added a better way to use useRef() with overrides.

March 13, 2021

Updated

The useAnimation() Hook — Found a better way to share an AnimationControls object between different overrides.
Compatibility with Overrides & Parent Components — Small changes because of the deprecation of width and height in components.

March 12, 2021

Updated Added examples of how to unpack properties from props.children.props.

March 11, 2021

Updated Everything about the new ControlType.Object property control, including examples.

March 5, 2021

Updated Complete rewrite that points out the difference between components with and without connectors. Also: additional examples.

Overriding Code Components

February 23, 2021

Added How to override a Smart Component’s variants, variables, and events.

Overriding Smart Components

Here’s an example on Twitter.

February 11, 2021

Added A new and free page with an overview of all the Framer and Framer Motion props, events, components, and utilities.

API Overview

Here’s a Twitter thread about this and other recent updates.

February 8, 2021

Updated I tested many Framer and CSS properties again for their animatability and made a new overview.

Animatable Properties

February 3, 2021

Updated The property control with multiple fused numbers now works a bit differently.

Fused Number

January 28, 2021

Updated Animating a Scroll layer with scrollAnimate has been buggy for a while, but there’s now a new solution with Framer Motion’s animate() function.

Animating Scroll Position

January 21, 2021

Updated Checked all the Example Animations. A few of them needed an update or could be done with less code because of new APIs.

January 19, 2021

Updated Some more updates because of changes in and additions to Framer Motion.

The Transition Property — New properties: repeat and repeatType + repeating spring animations
‘While’ Animations and Initial — New: whileDrag and whileFocus
Variants — Added a workaround for a bug
Animate Presence — Currently only partially works in overrides, but there’s a workaround

January 12, 2021

Updated Added the new duration-based springs and expanded the content.

Animation Types

December 4, 2020

Added How to start a drag gesture from another element with Framer Motion.

Drag Controls

Here’s an example on Twitter.

December 1, 2020

Updated The Overrides introduction and its examples because the API changed a bit (properties like backgroundColor are now inside a style object in props).

Overrides

November 26, 2020

Added How to bind animations to the scrolling of a webpage (or an element in that page) with Framer Motion.

Scroll-based Animations

November 20, 2020

Added How to make a multi-page website in React with Framer Motion page transitions.

Routing

November 16, 2020

Updated The Dragging section is updated because of API changes to modifyTarget(), min, max, and PanInfo. I also added inline interactive examples and Framer Motion versions in CodeSandbox.

October 21, 2020

Added New in the Framer Motion section: Everything about animating SVGs.

September 23, 2020

Added CodeSandbox versions with Framer Motion for all the examples in Animation.

September 22, 2020

Added New Framer Motion section.

August 5, 2020

Updated Examples in Smart Components now have event handler property controls.

Updated In Dragging: added examples of how to set drag constraints with useRef().

Drag Constraints

July 25, 2020

Added to the Overrides section: info about using events with Framer’s Default Components (and similar components with Interaction Triggers).

Updated

Overriding Code Components

July 1, 2020

Update and expansion of the Property Controls section with new example projects:

Updated

Added

Event Handler

Transition

June 11, 2020

Updated All example projects were tested in Framer Web on Windows and updated when needed. Some projects that use emojis in the examples now have a separate version for Windows.