☰
Table of Contents
Code Overrides
Code Overrides
Basic Overrides
Sharing Data Between Overrides
Overriding Canvas Components
Overriding Code Components
Code Components
Code Components
A Simple Code Component
Component Styling
Component Sizing
Motion-Compatible Components
Importing Other Layers, Components, and Packages
Customizing an Existing Component
Property Controls
Flexbox Component
Framer for Developers
Framer for Developers
Animation
Animation
The Animate Property
The Transition Property
‘While’ Animations and Initial
Variants
Hooks
The useState() Hook
Animate Presence
The useCycle() Hook
The useAnimationControls() Hook
Keyframes
The useAnimate() Hook
The Reorder Components
Animatable Properties
Animation Types
API Overview
Example Animations
Motion Values
Motion Values
Chaining and Transforming Motion Values
Scroll-Linked Animations
Scroll Layers for Prototyping
Animating Motion Values
Resetting a Motion Value
Springy Motion Values
Framer Motion
Framer Motion
Create React App
CodeSandbox
Automatic Layout Animations
Layout Group
Layout ID
SVG Animations
Drag Controls
Routing
Smart Code Components
Smart Code Components
Props Versus State
Passing Down Props
Sharing State
Letting a Prop Change the State
Simple But Smart
iOS Segmented Control
Using a Web API
Using a Web API
Dragging
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
Archive
Archive
Design Components
Overriding Design Components
Overriding Code Components
Overrides (pre X22)
Code Components (pre X22)
Animations (pre X22)
Updates
FAQ
Get the book
Login / Register
Add your testimonial
Required
Name
Email
Occupation
What do you do; at a company or freelance?
Website, Twitter or Dribbble profile
Where should we link to?
Testimonial
What do you think of the Framer book?
Photo
Would you like to include a photo or avatar? (min. 200px, please.)
