Updates

October 13, 2021

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

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

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

August 4, 2021

Added  An overview of all the little things that changed with the introduction of 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

July 1, 2021

Updated

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:

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() HookDynamic 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.

March 13, 2021

Updated  

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.

February 23, 2021

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

February 11, 2021

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

February 8, 2021

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

February 3, 2021

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

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.

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.

January 12, 2021

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

December 4, 2020

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

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

November 26, 2020

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

November 20, 2020

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

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().

July 25, 2020

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

Updated

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

Added

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

Added

December 23, 2019

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

Updated  The remaining pages in Code Components:

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

September 19, 2019

Added  to Smart components

September 13, 2019

Added  Smart components section

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:

July 25, 2019

Added  More about Dragging

July 22, 2019

Added  New section: Dragging

July 1, 2019

Added  New chapter about keyframe animations

Updated  Added an example of a sequence involving different frames

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

June 18, 2019

Added  Big Playground animations update

May 24, 2019

Added  More about the new animation API

May 14, 2019

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

May 10, 2019

Updated  Changes because of the new APIs in Framer X22

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

April 29, 2019

Added  Pages about the new function components in Framer Beta

April 26, 2019

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

April 13, 2019

Added  Example animations for Framer Beta

April 9, 2019

Added  Overrides in Framer Beta explained

March 30, 2019

Added

March 25, 2019

Added  Animation techniques

March 20, 2019

Launch of the Framer X book

February 12, 2019

Online and free version of the Framer Classic book