Updates

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

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

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

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.