Updates
March 5, 2021
Updated Complete rewrite pointing 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.
- The Transition Property — New properties:
repeat
andrepeatType
+ repeating spring animations - ‘While’ Animations and Initial — New:
whileDrag
andwhileFocus
- 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.
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.
- 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.
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.
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:
- 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
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
- 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
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
- 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
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
- 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
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