Table of contents
Jump to:
- Code Overrides
- Code Components
- Framer for Developers
- Animation
- Motion Values
- Framer Motion
- Smart Code Components
- Using a Web API
- Dragging
- Archive
Code Overrides
- Code Overrides
- Basic Overrides
- Sharing Data Between Overrides
- Overriding Code Components
Code Components
- Component Styling
- Component Sizing
- Importing Other Layers, Components, and Packages
- Property Controls
- General
- By property type
Framer for Developers
Animation
- Animate Presence
- The useAnimationControls() Hook
- Animatable Properties
- 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
Motion Values
- Motion Values
- Scroll-Linked Animations
- Scroll Layers for Prototyping
- Animating Motion Values
- Springy Motion Values
Framer Motion
- Automatic Layout Animations
- SVG Animations
- Routing
Smart Code Components
- iOS Segmented Control
Using a Web API
Dragging
Archive
- Overriding Code Components
- 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)
- Importing React
- Extending the
React.Component
class - Exporting the new class
- Rendering the content
- It’s not HTML, it’s JSX
- CSS styling
- TypeScript type definition for the CSS style object
- Adding Custom Properties
- TypeScript property definition
- Default property values
- Property Controls
- Property Controls