Table of contents
Jump to:
- Framer for Developers
- Code Overrides
- Code Components
- Animation
- Framer Motion
- Smart Code Components
- Dragging
- Archive
Framer for Developers
Code Overrides
- Code Overrides
- Basic Overrides
- Sharing Data Between Overrides
- Overriding Smart Components
- Overriding Code Components
Code Components
- Component Styling
- Component Sizing
- Importing Other Layers, Components, and Packages
- Property Controls
- General
- By property type
Animation
- Animate Presence
- The useAnimation() Hook
- Animatable Properties
- Animating to a Scroll Position
- Example Animations
- 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 path
- Colors: Keyframe animation
- Colors: Interpolation
- Colors: Switching between states
- Tracking the cursor
- Variants: Animation propagation
- Variants: Staggered animation
- Cycling parent and child variants
- SVG gradient animation
- Animate Presence
- Animate Presence: Stack 3D
- Layout animation
- Swapping elements
- Swipe to delete
Framer Motion
- Automatic Layout Animations
- Scroll-based Animations
- SVG Animations
- Routing
Smart Code Components
- iOS Segmented Control
Dragging
Archive
- Overrides (pre X22)
- Applying an override
- Override files
- What are you ‘overriding’?
- Events
- The example ‘Scale’ override
- The simplest possible Override
- Importing another JavaScript file
- An ES6 Arrow function
- Our function returns an object
- Our function is saved in a
const
- Our function has a TypeScript type of
Override
- We ‘export’ the function
- A bit more about
const
- More complicated Overrides
- Setting a property when tapped
- Animating a property when tapped
- Animating a property automatically
- Starting from the current value of a property
- Code Components (pre X22)