Updates

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

• Importing Other Layers, Components, and Packages
• Customizing an Existing Component

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.

• Letting a Prop Change the State
• Simple But Smart

November 15, 2021

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

• Smart Code Components
• Props Versus State
• Passing Down Props
• Sharing State
• Letting a Prop Change the State
• Simple But Smart

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.

• Code Overrides
• Basic Overrides
• Sharing Data Between Overrides

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

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.

• Overriding Smart Components
• Overriding Code Components

March 11, 2021

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

• Property Controls
• Enum

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.

• Dragging
• Axis and Direction Locking
• Drag Constraints
• Drag Elastic
• Drag Momentum
• Inertia Animations
• Modify Target
• Min and Max
• Snap to Grid Example
• Snap to Corner Example
• Drag Events

October 21, 2020

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

• SVG Animations
• Animating SVG Path Changes
• Animating an SVG Path’s Stroke
• Animating SVG Gradients

September 23, 2020

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

September 22, 2020

Added  New Framer Motion section.

• Framer Motion
• Create React App
• CodeSandbox
• Differences With the Framer API
• Automatic Layout Animations
• Shared Layout Animations
• Layout ID

August 5, 2020

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

• Sharing State
• Letting a Prop Change the State
• Simple But Smart

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

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.

May 29, 2020

Updated  All example projects and content were updated for the new Framer Web and Framer Desktop.

April 30, 2020

In Animation: Expanded While Hover and While Tap, expanded Variants and moved it to a separate page, added Animate Presence

Updated

• While Hover and While Tap

Added

• Variants
• Animate Presence

March 3, 2020

Added  An option to 🔍 search the contents of a book (top right on every page).

February 26, 2020

Update and expansion of the Overrides section:

Updated

• Overrides
• Framer’s Data object
• Overriding Code Components 

Added

• Using CreateStore
• Overriding Design Components

December 23, 2019

Added  New page in Code Components: Compatibility with Overrides & Parent Components

Updated  The remaining pages in Code Components:

• A Simple Code Component
• Why Use <Frame>s?
• Including Other Components
• Customizing an Existing Component
• Property Controls (The examples were also made compatible with Overrides.)

November 28, 2019

Updated  All examples in the Animation section now also have Framer Motion versions.

November 15, 2019

Added  to Example Animations: 10 more examples + all animations in Framer Motion format

October 15, 2019

Added  to Smart Components

• iOS Segmented Control
  • 1. Starter
  • 2. Selected Index
  • 3. Initially Selected Index
  • 4. Selection Indicator
  • 5. Variable Segment Width
  • 6. Adding the Separators
  • 7. Animating the Separators
  • 8. Responding to Property Changes
  • 9. Adding an Event Property
  • 10. A Pinch of TypeScript
  • Example Prototypes

September 19, 2019

Added  to Smart components

• Simple But Smart

September 13, 2019

Added  Smart components section

• Smart Components
• Props Versus State
• Passing Down Props
• Sharing State
• Letting a Prop Change the State

August 31, 2019

Updated  Small update. All projects checked and updated for Library 1.1.1 (in Framer X42). Some code changes were needed in:

• Using the current state in calculations – Example 2
• Example animations – 16. Page: Effects

July 25, 2019

Added  More about Dragging

• Snap to Grid Example
• Snap to Corner Example
• Drag Events

July 22, 2019

Added  New section: Dragging

• Dragging
• Axis and Direction Locking
• Drag Constraints
• Drag Elastic
• Drag Momentum
• Inertia Animations
• Modify Target
• Min and Max

July 1, 2019

Added  New chapter about keyframe animations

• Keyframes

Updated  Added an example of a sequence involving different frames

• The useAnimation() Hook

Updated  Some Override examples now use motionValue() instead of useMotionValue()

• Example Animations

June 18, 2019

Added  Big Playground animations update

• Animation
• The Animate Property
• The Transition Property
• While Hover and While Tap
• Hooks
• The useState() Hook
• The useCycle() Hook
• The useAnimation() Hook
• Tips for Overrides
• A Frame’s Animation Properties (was later replaced by API Overview)

May 24, 2019

Added  More about the new animation API

• Animatable Properties
• Animation Curves
• Animating Scroll Position

May 14, 2019

Updated  There are now 30 animation examples, as Code Components and Overrides

• Example Animations

May 10, 2019

Updated  Changes because of the new APIs in Framer X22

• Tap one frame, animate another
• Overriding Code Components
• The Data object

Moved  Content about the former animation API and class components is now in Archive

• Overrides (pre X22)
• Code Components (pre X22)
• Animations (pre X22)

April 29, 2019

Added  Pages about the new function components in Framer Beta

• Code Components
• Why use <Frame>?
• Including Other Components
• Property Controls

April 26, 2019

Updated  The Framer Beta example animations (hooks became possible in Overrides)

• Example Animations

April 13, 2019

Added  Example animations for Framer Beta

• Example Animations

April 9, 2019

Added  Overrides in Framer Beta explained

• Overrides

March 30, 2019

Added

• The Data Object

March 25, 2019

Added  Animation techniques

• Toggle animation
• Chaining animations
• Delaying an animation
• Staggered animations

March 20, 2019

Launch of the Framer X book

February 12, 2019

Online and free version of the Framer Classic book