Updates

March 5, 2021

Updated  Complete rewrite pointing 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