Table of contents

Jump to:

• Overrides
• Code Components
• Animation
• Framer Motion
• Smart Code Components
• Dragging
• Archive

Overrides

• Overrides
  • Code in Framer
  • Applying an override to a frame
  • Editing override files
  • What are you ‘overriding’?
  • 1. Changing the background color
    • Importing another file
    • An override is a function
      • A function declaration
      • A function expression
      • An arrow function
      • Which one to use?
    • Our function returns an object
    • Our function is typed as an Override
    • We export the function
  • 2. Animating the color change
  • 3. Animating when tapped (adding state)
  • 4. Reading the color used on the canvas
  • 5. Toggle the color
    • A Boolean state

• Framer’s Data Object
  • Local state versus shared state
  • Local state: in the override
  • Shared state: in the data object
  • Just a JavaScript object
    • The data object triggers redraws
    • Importing
  • Communicating between overrides
  • Objects and arrays in a data object
  • Sharing a data object between files
  • Not for code components

• Using CreateStore
  • The Data object reloads everything
    • The Button override
    • The Toast override
    • The Counter override
  • Example with CreateStore
    • How to use CreateStore
  • Using objects or arrays
  • Nice, but how does this work?
  • Sharing data between overrides and code components

• Overriding Design Components
  • Overriding component instances
    • Overriding custom properties
    • Overriding common properties
  • Overriding the primary
  • Cloning child frames

• Overriding Smart Components
  • Changing the current variant
  • Changing variables
    • Can you override other properties?
  • Overriding events
    • Event variable
  • Events example
    • The smart components
    • The data
    • Scene toggles
    • Lamp toggles

• Overriding Code Components
  • Which properties can you override?
  • Components with a connector
    • Button example
      • Unpacking properties
  • Components without a connector
    • Events hunt
      1. Check the docs
      2. Test for common events
      3. Dive in the code
    • Button example
  • Testing which values an event returns
    • Components with a connector
    • Components without a connector
      • The onChange() event
      • The onValueChange() event
  • Examples
    • Slider + Arconic
    • Radio Buttons + Charts
    • More examples
    • Even more properties
      • Just wrap it

Code Components

• Code Components

• A simple Code Component
  • Code in Framer
  • Very basic
  • Importing React
  • A function that returns HTML
  • Exporting the function
  • Actually, it’s not HTML but JSX
  • Using a CSS style object
  • Adding a custom property

• Why use <Frame>s?
  • Styling a <div>
  • Styling a <Frame>
  • Positioning
    • Transform properties
    • Absolute positioning
  • Animations & events
    • Framer Motion
  • Also on the canvas

• Compatibility with Overrides & Parent Components
  • Accepting incoming properties
  • Selecting which properties can be overridden
    • The component’s top-level container
  • Component sizing
    • Intrinsic size
    • The problem with percentual sizing
  • Unpacking custom properties
  • Extracting the style property

• Including Other Components
  • Simple: just use props.children
    • Custom property control
  • Importing other code components
    • Importing public components
  • Importing design components
    • Design components inside virtual folders

• Customizing an Existing Component
  • Components that use external libraries
  • Components that use other files from the same package

• Property Controls
  • General
    • Adding a property control
      • Default values
      • addPropertyControls()
    • Multiple items
      • ControlType.Array
    • Grouping properties in an object
      • ControlType.Object
    • Multiple objects
    • Hiding Controls
  • By property type
    • String
      • ControlType.String
      • Multiple strings
    • Color
      • ControlType.Color
      • Multiple colors
    • Image
      • ControlType.Image
      • Multiple images
    • Number
      • ControlType.Number
      • Multiple numbers
    • File
      • ControlType.File
      • Multiple files
    • Boolean
      • ControlType.Boolean
      • Multiple Boolean values
    • Enum
      • Twemoji
      • ControlType.Enum
      • Multiple enums
    • Fused Number
      • ControlType.FusedNumber
      • Multiple fused numbers
    • Event Handler
      • ControlType.EventHandler
      • Events that share a state
    • Transition
      • ControlType.Transition
    • Component Instance
      • A single component instance
      • Checking if the property is empty
      • Cloning the component instance
      • ControlType.ComponentInstance
      • More component instances
      • Multiple component instances
        • Checking if props.children is empty
      • Cloning multiple component instances

Animation

• Animation
  • The animate and transition properties
  • Triggering animations
  • Which layers are animatable?

• The Animate Property
  • Basic animation
  • Animating a code component
  • Transform properties
    • Transform origin
  • Colors
  • Complex values
  • Which properties can you animate?

• The Transition Property
  • An easing curve
  • Spring settings
  • Loop and delay
  • Delay between repetitions
  • Repeat type and Bézier curves
    • Bézier curves
    • Repeating spring animations
  • Transition settings per property
    • Example 1
    • Example 2

• ‘While’ Animations and Initial
  • While Hover
  • While Tap
  • While Drag
  • While Focus
    • whileFocus with validation example
  • Initial
  • Bug when using borderRadius in a ‘while’ animation
  • Including transition settings
  • Initial: false

• Variants
  • Basic use
    • Remember states?
    • Bug workaround
  • Animation propagation
  • Animation orchestration
    • Example 1: delayChildren and staggerChildren
    • Example 2: staggerDirection and when
  • Dynamic variants
    • The custom property
      • Using the custom property with overrides

• Hooks
  • What’s a hook?
  • How to use a hook
  • Array destructuring

• The useState() Hook
  • Basic use
  • More states
  • Using the current state in calculations
    • Example 1
    • Example 2
  • Multiple properties
  • Using useState() purely for… state
    • First version: Separate useState() hooks
    • Second version: Only one useState() hook
  • Tip: Another way to import useState()

• Animate Presence
  • Conditional rendering
    • Conditional rendering with an override
  • Animate presence
    • How does this work?
    • Animate presence in an override
  • Multiple children
  • Same frame, different key
  • Exit before enter
  • Canceling the initial mount animation
  • onExitComplete()
    • Rotating rotateY with an adjusted originZ
  • Dynamic variants

• The useCycle() Hook
  • Basic use
  • Animation
  • Animating more properties
  • Cycling to a specific value
  • Cycling between variants
    • Cycling to a specific variant
  • Cycling parent and child variants
    • Initial: false

• The useAnimation() Hook
  • Basic use
  • Stopping an animation
  • Return after drag
  • A sequence of animations
  • A sequence with pauses and repositioning
    • Inserting a pause
    • Repositioning
  • Same sequence, multiple frames
    • Sharing an AnimationControls object between overrides
  • A sequence that involves different frames
    • Overrides version
  • Dynamic Start
    • Dynamic Start with overrides

• Keyframes
  • Keyframes example
    • For tween curves
  • A simpler example
  • Two properties simultaneously
  • Inserting a pause
  • Adjusting timing with times
  • Fast start, slow ending
  • Using keyframes instead of async / await
  • Why even use keyframes?
  • Different easings

• Tips for Overrides
  • Sometimes you don’t need useState()
  • Using the data object like start()

• Animatable Properties
  • Overview table
  • Setting some initial
  • Dimensions and position
    • Example 1: Width and height
    • Size
    • Example 2: Right and bottom
    • Automatic layout animations
  • Transform
    • The smoothest animations
    • Transform origin
    • Example 3: rotateY
    • Perspective
    • Example 4: Y and Z
    • Example 5: Y, Z, and transformPerspective
    • Example 6: scaleX and scaleY
    • Example 7: skewX
    • Example 8: skewX
    • skew
  • Opacity and visibility
    • Example 9: Opacity
    • Visible
    • Overflow
  • Background
    • Example 10: background
    • Example 11: backgroundColor
    • Example 12: Radial gradient
    • Example 13: Linear gradient
  • Shadow
    • Example 14: boxShadow
  • Text
    • Example 15: textShadow
    • Example 16: fontWeight
  • Border
    • Example 17: Border on the canvas
    • Example 18: Border in code
  • Border radius
    • Example 19: borderRadius
    • Example 20: individual border radii
  • Filters
    • Example 21: Drop shadow
    • Example 22: Opacity
    • Example 23: Brightness
    • Example 24: Contrast
    • Example 25: Grayscale
    • Example 26: Hue rotate
    • Example 27: Blur
    • Example 28: Invert
    • Example 29: Saturate
    • Example 30: Sepia
    • Example 31: Combined filters
    • Example 32: Backdrop filter

• Animation Types
  • Framer’s animation editor
  • Tween
    • Predefined easing curves
    • Custom Bézier curves
  • Spring
    • Default spring
      • Stiffness, damping, and mass
      • Velocity, rest delta, and rest speed
    • Duration-based spring
    • Always include the type

• Animating Scroll Position
  • With scrollAnimate
  • With the animate() function
    • How to read the current scroll position
      • With the MotionValue’s onChange()
      • With an onScroll() event
    • Adding events

• API Overview
  • Animation properties
    • Transition options
    • Orchestration options
  • Drag properties
    • Drag transition options
  • Events
  • Special components
  • MotionValues
    • The MotionValue API
  • Utilities
    • AnimationControls object

• Example Animations
  • 1. Animate
  • 2. Animate: Spring
  • 3. Animate: Loop
  • 4. Animate: Reverse
  • 5. Event: WhileTap
  • 6. Event: Hover
  • 7. Event: Tap
  • 8. Event: Sequence
  • 9. Drag
  • 10. Drag: Inertia
  • 11. Drag: Locking
  • 12. Drag: Transform
  • 13. Drag: 3D
  • 14. Page
  • 15. Page: Indicators
  • 16. Page: Effects
  • 17. Scroll
  • 18. Scroll: Progress
  • 19. Scroll and Page
  • 20. Scroll: Refresh
  • 21. Color: Arrays
  • 22. Color: Interpolation
  • 23. Color: Layered
  • 24. Cursor
  • 25. Grid
  • 26. Variants
  • 27. Variants: Staggered
  • 28. Variants: Nesting
  • 29. Stack
  • 30. Stack: Animation
  • 31. Keyframes
  • 32. SVG
  • 33. Modal
  • 34. Shuffle
  • 35. Swipe to Delete
  • 36. Stack 3D

Framer Motion

• Framer Motion
  • Motion elements
  • Using Framer Motion in Framer
  • Using Framer Motion in a React project

• Create React App
  • Node.js and NPM
    • Installing Node & NPM
    • Updating NPM & Node
  • Creating that React App
  • Folder structure
  • Visual Studio Code
    • App.js
  • Adding Framer Motion
  • Deploying your web app
    • Uploading to a server
  • Starting from an existing CRA project
  • Yarn

• CodeSandbox
  • How to get started
    • 1. Create a React sandbox
    • 2. Add Framer Motion
    • 3. Import the motion component
    • 4. Use it
  • Deploying your web app

• Differences With the Framer API
  • No top-level convenience properties
    • Transform properties
  • No absolute positioning
    • Positioning in Framer
    • Positioning on the web
  • No named CSS colors
  • No native Framer components

• Automatic Layout Animations
  • Use in Framer
  • A basic switch
    • The layout property
  • Inline Styling Versus CSS Classes
    • Inline styling
    • Using CSS classes
      • Scale correction for border-radius and box-shadow
      • Animating border radius and box shadow
  • Scale Correction for Child Elements
  • Customizing Layout Animations
    • Horizontal and vertical animation settings
      • layoutX
      • layoutY
    • Only animating position
      • One more example

• Shared Layout Animations
  • Without AnimateSharedLayout
  • With AnimateSharedLayout
  • One more example

• Layout ID
  • Swapping Elements
    • ‘Pick a color’
      • Without animation
      • With animation
    • Some more examples
      • With Animate Presence
      • With crossfade
  • Recreating Magic Motion
    • Combining Layout ID and standard animations
      • Animating the layout
      • Animating the background
  • Adding a New Element
    • Photos example
      • Photos array
      • Thumbnail component
      • Detail view component
      • Preloading the bigger picture
      • The App component
    • Adding exit animations
    • Adding crossfade
    • One more example
    • Remove before adding
      • Give AnimateSharedLayout a break
      • Some extra time for Animate Presence

• Scroll-based Animations
  • Scroll-bound animations in Framer
  • Scroll-bound animations with Framer Motion
  • Viewport scroll
    • Scroll progress example
    • Transforming MotionValues
      • Interpolating between numbers
      • Interpolating between CSS calc() values
      • Interpolating between CSS gradients
    • Displaying MotionValues
      • Knowing when a MotionValue changes
      • Adding a state
    • Some more examples
      • Viewport scroll and SVG path animation
      • ‘Scroll’ by Marc Bouchenoire
      • Rotating SVG paths
      • Dynamic Navigation Example
  • Element scroll
    • Overflow: scroll
    • Adding a reference
    • Simple scroll progress example
    • More advanced example
    • One more example

• SVG Animations
  • All the elements
    • Filters and gradient animations triggered by events
  • Circle example
  • Animating SVG Path Changes
    • A simple curve
      • The path’s shape
      • The path’s style
    • Animating the curve
    • Keyframes
    • More paths
    • Paths must be similar
    • Bending a straight line
    • Some more examples
      • By Matt Perry
      • By Viktor Renkema
  • Animating an SVG Path’s Stroke
    • Extra convenience properties
      • MotionValues, please
    • Motionized CRA project
      • The path animation sequence
        • The ovals
        • A function that kicks off animation sequences
      • First animation: shorten the path
      • Second animation: travel along the path
        • Color me gradient
      • Third animation: grow the path
      • The central circle
      • Spinning the icon
    • Some more examples
      • SVG checkbox
        • The checkmark
        • The box
      • Viewport scroll and SVG path animation
        • The circle
        • The checkmark
  • Animating SVG Gradients
    • Radial gradient example
      • The <motion.circle>
      • The <motion.radialGradient>
    • Linear gradient example
      • Attributes
      • Animation
    • Animating a gradient’s color stops
      • Motionized CRA project
      • Animating the offset of color stops
      • One more example

• Drag Controls
  • The useDragControls() hook
  • Cursor snapping
  • Some more examples

• Routing
  • Client-side routing
  • Page transitions with Animate Presence
  • React Router example
    • The <BrowserRouter>
    • The content pages
    • The <Switch> and its <Route>s
    • Creating links to pages
      • With <Link>
      • With <NavLink>
  • Adding page transitions
    • Wrapping the pages in <AnimatePresence>
    • Adding mount and unmount animations
    • Adding a key with useLocation()
  • Some more examples
    • App Store demo
    • Cats and dogs
    • Framer route stack

Smart Code Components

• Smart Code Components
  • State
  • The ability to share its state
  • You can change its state with a property control
  • In this section

• Props Versus State
  • What are props?
  • What is state?
  • Props is a like library book, state is like your diary
  • Where to save the state?
    • The useState() hook
  • Example: Car
  • Example: Kid
    • Thy prop shalt not changeth thy state… until you let it

• Passing Down Props
  • Default property
  • Property control
  • Override
  • Parent component
    • Override inside a component?
  • Override example: Car + segmented control
  • Parent component example: Fleet
  • Parent component example: Dad
    • Passing state as a property

• Sharing State
  • An outspoken kid
    • The overrides
    • Event handler property control
  • More moods
    • Isn’t useCycle() better?

• Letting a Prop Change the State
  • A susceptible kid
  • Random moods
  • Overrides

• Simple But Smart
  • Version A: Made green by a prop
  • Version B: Greenness is a state
    • What is changed?
  • Version C: The prop updates the state
    • What is changed?
  • Version D: The state is shared
    • What is changed?
      • Event handler property control
    • Overrides

• iOS Segmented Control
  • 1. Starter
    • Default properties
    • Property controls
    • The component
  • 2. Selected Index
    • The index state
    • Tap handler function
    • Change selection function
    • Displaying the selected segment
  • 3. Initially Selected Index
    • Does this work?
  • 4. Selection Indicator
    • An AnimationControls object
    • The selection indicator
    • Triggering the animation
  • 5. Variable Segment Width
  • 6. Adding the Separators
  • 7. Animating the Separators
    • The first rule of hooks
    • Four AnimationControls objects
    • Hiding the correct separators
    • Animating the separators
  • 8. Responding to Property Changes
  • 9. Adding an Event Property
    • Current index or current option?
    • Event callback property
    • Calling the event property
  • 10. A Pinch of TypeScript
    • Why add TypeScript?
      • Type enforcement
      • Optional and required properties
      • Code completion
    • What’s that extra code?
      • FrameProps
      • Frame, stack, scroll or page
      • Partial
      • Type annotations
      • Passing the types to the component
    • Splitting up the properties
      • Managing prop overrides
  • Example Prototypes
    • Current option
    • Current index
    • Properties demo
    • Maps
    • Steps

Dragging

• Dragging
  • In an override
  • In a component

• Axis and Direction Locking
  • Only horizontally or vertically
  • Direction lock
  • Nested frames

• Drag Constraints
  • Area example
    • Using the area of another frame
      • Using useRef() with overrides
  • Snap back example
  • Slider example
    • A responsive slider

• Drag Elastic
  • Snap back example

• Drag Momentum
  • Slider example

• Inertia Animations
  • Momentum
    • Power
    • Time constant
    • Modify target
  • Snap to constraints
    • Bounce stiffness
    • Bounce damping

• Modify Target
  • Add 50
  • Back to zero

• Min and Max

• Snap to Grid Example

• Snap to Corner Example
  • 1. With modifyTarget()
  • 2. With an onDragEnd() event
    • Tracking position
    • Tracking velocity
    • Sending the frame to the correct corner

• Drag Events
  • Drag events example
  • MouseEvent and TouchEvent objects
  • PanInfo object
  • Overview example

Archive

• Archive

• Design Components
  • Creating a design component
  • Primary and instances
  • Changing properties
  • Child frames
  • Reset Overrides
  • Text and image properties
  • Detach From Primary
  • Organizing in folders
  • Also code components
  • It’s all React

• 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
    • We animate values, not properties
    • The Animatable object
  • Animating a property when tapped
    • Back to Framer’s example ‘Scale’ override
  • 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
    • How to add a Property Control
    • Multiple items
    • String
      • Multiple Strings
    • Color
      • Multiple Colors
    • Image
      • Multiple Images
    • Number
      • Multiple Numbers
    • File
      • Multiple Files
    • Boolean
      • Multiple Boolean values
    • Enum
    • Segmented Enum
    • Fused Number

• Animations (pre X22)
  • Animatable properties
    • Animating position
      • Starting from the current position
    • How to check if a property is ‘animatable’
  • Animation curves
    • Linear
    • Easing curves
    • Bézier curves
    • Spring curves
  • Animating a Scroll component
  • Toggle animation
    • An ON/OFF button
      • Text on the button
  • Chaining animations
    • Returning to the start position
  • Delaying an animation
    • Using setTimeout()
    • Using a dummy animation
  • Staggered animations