Jump to: Introduction Some Examples Tween Spring Duration-based spring Repeat Reverse While hover While tap While drag Cycling through states Animation sequence Drag: Constraints Drag: Direction locking Drag: Transform Drag: 3D transform Scroll: Progress Scroll: Refresh Page: Indicators Page: Effects Scroll and Page combined SVG path length Keyframes: Position and color Keyframes: Morphing an SVG […]

All the Framer Motion properties, events, and utilities. Here’s an overview of the Framer Motion API properties, user events, extra components, and utility functions,… with links to where they’re explained or used in the book. The Framer Motion 3D integration with React Three Fiber is not yet included. For a demo of the visual and […]

These two components, both included in Reorder, let you create a drag-to-reorder list, which can be vertical or horizontal. You can also add and remove items and make only part of each item draggable.📘 The Framer Code Guide – 🔀 Reorder Components open in Framer The basicsReorder.Group Reorder.Item <ul> or <ol> No list styleMaking the item […]

📘 The Framer Code Guide – 💫 useAnimationControls() open in Framer Basic use Stopping an animation Return after drag A sequence of animations A sequence with pauses and repositioningInserting a pause Repositioning Same sequence, multiple elementsSharing an AnimationControls object between overrides A sequence animating separate elementsOverrides version Dynamic StartDynamic start with overrides Only after mount From the […]

With useAnimate(), you can manually start and stop animations and create a sequence of different animations. This new hook will soon replace useAnimationControls() because this one works with all HTML and SVG elements, not only Motion elements.📘 The Framer Code Guide – 💫 useAnimate() open in Framer Animate an elementReturn after drag How to use useAnimate()? […]

In the previous examples we swapped elements that had the same Layout ID. One element was always removed the moment another was added.But you can also add an element without removing its namesake. Adding an element with the same layoutId as an existing one will start an animation from the old element to the new […]

📘 The Framer Code Guide – 💫 useState() open in Framer Basic use More states Using the current state in calculationsExample 1 Example 2 Multiple properties Using useState() purely for… stateFirst version: Separate useState() hooks Second version: Only one useState() hookBasic useThis hook is part of React, so you have to import useState from the React […]

First, our component needs the most basic functionality: We should at least be able to select a segment by tapping it. Let’s make this thing interactive.The index state Tap handler function Displaying the selected segmentThe index stateI added an index state variable (and a setIndex() function to change it) with an initial value of 0:export default function […]

Let’s take a simple code component and smarten it up to clearly see which code changes are needed.Version A: Made green by a prop Version B: Greenness is a stateWhat is changed? Version C: The prop updates the stateWhat is changed? Version D: The state is sharedWhat is changed?Event handler property control The code overrides We’ll […]

An outspoken kidThe code overrides Event handler property control More moodsIsn’t useCycle() better? Social components, those that share their state, are often UI controls.A social input field, one that shares the entered text, can be used to display that text somewhere else on the screen. A social slider, which shares its current value, can be attached to […]