☰
Table of Contents
Framer for Developers
Framer for Developers
Code Overrides
Code Overrides
Basic Overrides
Sharing Data Between Overrides
Overriding Smart Components
Overriding Code Components
Overriding Design 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
Animation
Animation
The Animate Property
The Transition Property
‘While’ Animations and Initial
Variants
Hooks
The useState() Hook
Animate Presence
The useCycle() Hook
The useAnimation() Hook
Keyframes
Animatable Properties
Animation Types
Animating to a Scroll Position
API Overview
Example Animations
Framer Motion
Framer Motion
Create React App
CodeSandbox
Automatic Layout Animations
Layout Group
Layout ID
Scroll-based Animations
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
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
Overrides (pre X22)
Code Components (pre X22)
Animations (pre X22)
Updates
FAQ
Get the book
Login / Register
Text Layers – Direction
Code Overrides