Updates

September 10, 2024

New section: Scroll-Triggered Animations.

  • New  There’s whileInview, which works like other gesture animations like whileHover, whileTap, etc.
  • New  and there’s useInview(), which is a simple state hook that signals when an element scrolled into view.

July 11, 2024

Updated  I moved all the content from The Framer Book to this new website, checked all the pages, and reorganized the content.

March 19, 2024

A few updates to Property Controls.

  • New  Image & Responsive Image — Next to standard images, Framer now also has a property control for responsive images.
  • Updated  Enum — A segmented enum can now also appear as a vertical list.
  • New  Date — A new property control that saves a date in ISO 8601 format.

December 23, 2023

New  With this set of components, <Reorder.Group> and <Reorder.Item>, you can create lists that you can reorder by dragging the items.

Here’s a short thread on X about Reorder with videos and links to online examples.

November 1, 2023

Updated  Small update: The calendar that uses useAnimate()’s stagger() function had troubles when the month started with a Sunday.

September 14, 2023

Updated  Small update: Transforming a Motion value with useTransform() now works a bit differently when using it with a function.

September 12, 2023

Updated  I expanded the explanations of some Example animations that use Motion values.

July 18, 2023

Updated  Small update: That bug that popped up when animating borderRadius with a ‘while’ animation is gone, both in Framer Motion and in Framer.

June 10, 2023

Updated  I updated all the UI images because the interface changed. And a multiple (array) of fused number controls now works differently.

June 5, 2023

Updated  The stagger() function you can use with useAnimate() (or animate()) has options that let you pick which item to start with, change the timing between animations with a curve, or add a delay.

Here’s a short thread on X about these options with videos and links to online examples.

May 18, 2023

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

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

Here’s a thread on X 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.

April 12, 2023

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

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.

February 20, 2023

Updated

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

December 9, 2022

Updated

December 3, 2022

Updated

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

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

November 21, 2022

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

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

November 18, 2022

Updated

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

Here’s a thread on X 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’.

Here’s a thread on X 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

  • Exit Animations — 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.
  • Exit Animations — 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

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.

January 22, 2022

Updated

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.

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.

New  How to make code components work with code overrides and inside other code 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.

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.

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.

  • Framer for Developers (later removed)

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

July 24, 2021

Updated

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.
  • Exit Animations — 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  

  • 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. (page is later removed)

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.

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.

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.

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.

Here’s an example on Twitter.

December 1, 2020

Updated  The Code 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).

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: Everything about animating SVGs.

September 23, 2020

Added  CodeSandbox versions with Framer Motion for all the examples.

September 22, 2020

Added  New Framer Motion section and more about layout animations.

August 5, 2020

Updated  Examples in Smart Code 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 Code 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

Expanded While Hover and While Tap, expanded Variants and moved it to a separate page, added Exit Animations

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 Code 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 Code Components

September 19, 2019

Added  to Smart Code Components

September 13, 2019

Added  Smart code 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 the Archive

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

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  Code overrides in Framer Beta explained

March 30, 2019

Added

  • The Data Object (later removed)

March 25, 2019

Added  Animation techniques

  • Toggle animation (later removed)
  • Chaining animations (later removed)
  • Delaying an animation (later removed)
  • Staggered animations (later removed)

March 20, 2019

Launch of the Framer X book

February 12, 2019

Online and free version of the Framer Classic book