Table of Contents
Updates
FAQ
Get the book

Login / Register

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)

Framer_basics-Events-Event_properties-Position_inside_a_layer_example — gif

Basic Overrides

Home FAQ Updates