Table of contents

Jump to:

Introduction

• Introduction
  • Framer and Framer Motion
  • Code Components
  • Code Overrides
  • When to write code
  • Triggering animations
  • Which layers are animatable?

Some Examples

Code Overrides

• Code Overrides
  • Applying an override to a layer
  • Editing override files
  • What are you ‘overriding’?
  • HOC versus legacy overrides
  • A closer look at a legacy override
    • 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
  • HOC overrides
    • Double brackets
    • A component that returns a component
    • For comparison: a code component that does the same
    • Pass along the props
    • ComponentType instead of Override

• Basic Overrides
  • 1. Animating the background color
  • 2. Simply changing the background color
    • Extracting style from the props
    • Frames had top-level properties
  • 3. Animating when tapped (adding state)
    • Adding an event
    • Wrapping the function call
    • Optional: adding an event handler function
  • 4. Toggle the color
    • A Boolean state

• Sharing Data Between Overrides
  • Local state versus shared state
  • Local state: in the override
  • Shared state: use CreateStore
  • Communicating between overrides
  • How to use CreateStore
    • Import it
    • Create a store
    • Call useStore() inside the overrides
    • Read and update
  • Updating an array
  • Updating an object
    • Using props.name for custom data
    • Using object.assign()
    • Listing the object’s contents
  • Sharing data between files
    • The file containing the store
    • The file importing the store
  • Sharing data with a code component
    • The Button override
    • The Toast override
    • The code component

• Overriding Canvas Components
  • Changing the current variant
  • Changing variables
  • Overriding events
    • Event variables
    • Native browser events
    • Events example
      • How are the widgets animated?
      • Switching to another variant automatically
  • Example Home app prototype
    • The components
    • The data
    • Scene toggles
    • Lamp toggles
    • Less overrides

• Overriding Code Components
  • Which properties can you override?
    • Handoff
    • Events
    • Testing for events
  • First example: Framer’s Toggle plus Ticker
  • Making a component readable by Handoff
    • Toggle
    • Slider
    • Why do they react to onTap() and onClick()?
  • Making a wrapped component compatible
    • Example: MUI slider + Video
  • Testing which values an event returns
    • Checking one event
    • Checking several events
    • Logging objects in the Console
  • Conic + Sliders example
  • Using Motion properties

Code Components

• Code Components

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

• Component Styling
  • Inline styling
  • Browser-specific properties
    • Backdrop filter example
    • Mask image example
  • Using a style object
    • Box 1: Just passing the object
    • Box 2: Adding extra properties
    • Box 3: Also works for Motion properties
    • Box 4: Adding extra values
    • Passing props.style to the outermost element
  • Inserting CSS with <style>
    • Google Fonts example
    • Example with a CSS pseudo-class
  • Using a CSS-in-JS library
    • Styled Components
      • A simple styled component
      • Adding a custom property
      • A Boolean property
      • Using Styled Components’ css() function
      • Making it Motion-compatible
    • Emotion
      • Framework agnostic use
      • Global styles
      • Combining styles
      • Styled components
    • Stitches
      • Framework agnostic use
      • Styled components
      • Making it Motion-compatible
      • Adding variants

• Component Sizing
  • Auto sizing versus fixed sizing
    • Canvas components vs. a stubborn code component
  • Making a code component resizable
    • Rigid component
    • Resizable component
    • Auto-sizing component
      • Don’t use 100%
    • Different options for width and height
  • Specifying layout options
    • Example: Width always Auto
    • Example: Height always Auto
    • Intrinsic size
      • Using width and height
      • Using Intrinsic size annotations
    • Example: Width always Fixed
    • Example: Height always Fixed

• Motion-Compatible Components
  • Unpacking custom properties
  • The ‘component container’ is no more
    • Then
    • Now
  • Making a code component Motion-friendly
    • Motion-friendly mesmerizing component
    • Result when importing in another code component

• Importing Other Layers, Components, and Packages
  • Importing Canvas, Code, and Framer Components
    • Importing canvas components
      • Local import
      • Feel free to rename
      • Use the canvas component in other places
    • Importing Framer components
      • Alternative: Wrap it in a canvas component
    • Importing other code components
      • First component: The one we’re importing
      • Local import
      • Feel free to rename
      • Alternative: more components in the same file
  • Importing External Modules
    • Overview
    • Importing an ES module from an URL
      • Versioning
      • Your own ES modules
    • Instant NPM imports
      • More examples
  • NPM Examples: Design System Components
    • MUI
      • A few Buttons
      • Making a component Motion-compatible
        • The code override
      • Rating
      • Radio buttons
      • Slider
        • The code override
    • Chakra UI
      • Button
      • Adding the <ChakraProvider>
        • On the canvas
        • In the preview
      • Motion-compatible Button
      • Tabs
      • Popover
      • Skeleton
    • React Bootstrap
      • Button
      • Adding Bootstrap’s CSS classes
        • On the canvas
        • In the preview
      • Motion-compatible Button
      • Modal
      • Carousel
  • Importing Any Layer From the Canvas

• Customizing an Existing Component

• 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 & Responsive Image
      • Image
        • ControlType.Image
      • Responsive Image
        • Different sizes
        • ControlType.ResponsiveImage
      • 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
        • Always in an object
    • Date
      • ControlType.Date
      • Multiple Dates
    • Event Handler
      • ControlType.EventHandler
      • Events that share a state
    • Transition
      • ControlType.Transition
    • Component Instance
      • A single component instance
        • Checking if the property is empty
        • ControlType.ComponentInstance
      • Cloning the component instance
      • More component instances
      • Multiple component instances
        • Checking if props.children is empty
        • Cloning multiple component instances

• Flexbox Component
  • Flexbox component
  • Properties
  • <Stack> and <FlexStack> comparison
  • Example use of a <Stack>
  • Example use of a <FlexStack>

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 are like a library book; state is like your diary
  • Where to save the state?
    • The useState() hook
  • Example: Car
    • Props
    • State
    • Animation
  • Example: Kid
    • State
    • Props
    • Thy prop shalt not changeth thy state… until you let it

• Passing Down Props
  • Ways to receive properties
    • Default property
    • Property control
    • Code override
    • Parent component
  • Override example: Car + Segmented control
  • Parent component example: Fleet
  • Parent component example: Dad
    • Passing state as a property
    • An extra property

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

• Letting a Prop Change the State
  • A susceptible kid
  • Random moods
  • The code overrides
  • Don’t share a state change triggered by a property change

• 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
    • The code overrides

• iOS Segmented Control
  • A – Starter
    • Version A
    • Default properties
    • Property controls
      • Mode
      • Set current by
      • Current index
      • Options
      • Current option
    • The component
      • Container div
      • Segments
  • B – Selected Index
    • The index state
    • Tap handler function
    • Displaying the selected segment
  • C – Initially Selected Index
    • Does this work?
  • D – Selection Indicator
    • The selection indicator’s container
    • The selection indicator
    • Placing the segments on top
  • E – Adding the Separators
  • F – Animating the Separators
    • Hiding the correct separators
  • G – Responding to Property Changes
  • H – Adding Event Properties
    • Current index or current option?
    • Adding event callback properties
    • Calling the event properties
      • Event property that shares the current selection
        • Use with code overrides
      • Event properties to use as interaction triggers
        • Interaction trigger example
  • I – A Pinch of TypeScript
    • Why add TypeScript?
      • Type enforcement
      • Optional and required properties
      • Code completion
    • What’s that extra code?
      • Partial
      • Type annotations
      • An alternative notation
  • Example Prototypes
    • Current option
    • Current index
    • Properties demo
    • Maps app
    • Health app
    • iTunes Store – Code version
    • iTunes Store – Canvas component version

The Main Properties

• The Main Properties

• 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

• The Initial Property
  • Setting the value(s) to animate from
  • Canceling an initial animation

Hooks

• Hooks
  • What’s a hook?
  • Meet useState()
    • 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

Gesture Animations

• Gesture Animations
  • While Hover
  • While Tap
  • While Drag
  • While Focus
    • whileFocus with validation example

Variants

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

Keyframes

• 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

Animation Types

• 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

Exit Animations

• Exit Animations
  • Conditional rendering
    • Conditional rendering with an override
      • Spreading out style
      • Mapping over React.Children
  • Animate presence
    • How does this work?
    • Animate presence in an override
  • Multiple children
  • Same div, different key
    • Doesn’t work with overrides
    • CodeSandbox version
  • Wait a bit
  • Canceling the initial mount animation
  • Pop layout
    • Automatic layout animations
    • The initial, animate, and exit settings
    • How items get added and removed
    • The "wait" mode with more items
  • onExitComplete()
  • Rotating rotateY with an adjusted originZ
  • Dynamic variants
    • <AnimatePresence>’s custom property

Cycling Through States

• Cycling Through States
  • Basic use
  • Animation
  • Animating more properties
  • Cycling to a specific value
  • Cycling between variants
    • Cycling to a specific variant
  • Cycling parent and child variants
    • Disabling the initial animation

Layout Animations

• 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
  • Transition setting
  • Only animating position or size
    • One more example

• Layout Group
  • Without a layout group
  • With a layout group

• Shared Layout Animations
  • Swapping Elements
    • Without animation
    • With Layout ID animation
    • The background color animation
  • Recreating Magic Motion
    • Version without animation
    • 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
      • Giving the overlay an exit animation
    • One more example
    • Remove before adding
      • Add a (very) short break
      • Wait until after the exit animation

Motion Values

• Motion Values
  • What is a Motion value?
  • Injecting a Motion value
    • Code component example
    • Code overrides example
    • Not a one-way street
  • Motion values work independently of React
    • Examples with state
      • Code component
        • Logging redraws
      • Code overrides
    • Examples with Motion values
      • Code component
        • Logging redraws
      • Code overrides
  • Displaying a Motion value’s current value
    • Just put it in a motion element.
    • Tweaking the values
      • Knowing when a Motion value changes
      • Adding a state
    • You don’t need useEffect()
    • Trick: One state is enough
    • Code overrides example

• Chaining and Transforming Motion Values
  • The useTransform() hook
  • Using a function
  • Using input and output ranges
    • Longer ranges
    • Not only numeric values
  • Options
    • Ease
    • Clamp
  • More examples
    • Paging
    • From Example Animations
      • 13. Drag: Transform
      • 14. Drag: 3D transform
      • 20. SVG path length
      • 24. Colors: Interpolation
      • 26. Tracking the cursor

• Scroll-Linked Animations
  • Tracking scrolling
  • Page scroll
    • A simple example
      • In Framer Sites
    • An even simpler example
    • One with useSpring()
    • Transforming Motion values
      • Interpolating between numbers
      • Interpolating between CSS calc() values
      • Interpolating between CSS gradients
      • Displaying Motion values
    • In Framer Sites
    • Check out Giles Perry’s project.
    • Some more examples
      • Viewport scroll and SVG path animation
      • ‘Scroll’ by Marc Bouchenoire
      • Dynamic Navigation Example
  • Element scroll
    • Overflow: scroll
    • Adding a reference
    • A simple example
      • In Framer Sites
    • More advanced example
      • In Framer Sites
    • One more example
  • Element position
    • The image
      • Scale
      • Opacity
      • CSS blur filter
    • The text
      • X position
      • Opacity
      • Text shadow
    • In Framer Sites
    • Scroll offset
      • The override
      • The progress circle
      • Version 1
      • Version 2
      • Version 3
      • Version 4
      • Version 5
      • Version 6
    • One more example

• Scroll Layers for Prototyping
  • Types of scroll layers
    • Non-native scrolls
    • Native scrolls
  • Reading the current scroll position
    • With a non-native scroll
      • Logging to the Console
      • Displaying on screen 
        • Using useMotionValueEvent()
        • Using onScroll()
    • With a native scroll
      • Logging to the Console
      • Scrolling horizontally?
      • Displaying on screen
  • Tracking a Scroll? Use a non-native one.
    • 15. Scroll: Progress
      • Version for a native scroll
      • A version that reads sizes
    • 16. Scroll: Refresh
      • Native scroll: no overdag

• Animating Motion Values
  • Introduction
    • Types of prototyping scrolls
  • With a non-native scroll
    • Animating to a scroll position
  • With a native scroll
    • Updating the offset with onScroll()
  • Some animate() options
    • With a non-native scroll 
      • Have something happen after the animation
      • The onUpdate() event
    • With a native scroll
  • Animating a Page component
    • Next page
    • Previous page

• Resetting a Motion Value
  • Mini-map example
  • Non-sticky version

• Springy Motion Values
  • Creating springy Motion values
  • Converting existing Motion values
  • Some more examples
    • A useScroll() with spring smoothing
    • Draggable circles
      • The main component
      • The circle component
      • The circle that’s dragged changes x and y for all of them
      • Each circle has slightly different useSpring() settings
      • Cycling color animation

Scroll-Triggered Animations

• Scroll-Triggered Animations
  • Using whileInView
  • Using useInView()

Manual Controls

• Manual Controls

• The useAnimate() Hook
  • Animate an element
    • Return after drag
    • How to use useAnimate()?
    • Animate when appearing
    • Also works with regular HTML and SVG elements
  • Animating sub-elements
    • The different sub-elements
    • The different animations
    • CodeSandbox version
    • Code override version
  • Controls
    • Controls example
      • Code overrides version
    • Animating sub-elements with controls
  • Stagger
    • Animated text
    • Animated calendar
      • Getting today’s date, first weekday, length of the month,…
      • Creating the calendar
      • Creating the circles in the background
      • Animating the calendar
      • Animating the circles
    • Options
      • From
        • Start with the first item
        • Start with the last item
        • Start from the center
        • Start from a specific number
      • Ease
        • A Framer Motion easing
        • A Bézier curve
        • An easing function
      • Start delay
        • Combining different options
  • Sequence
    • Shrinking box
    • Animating separate elements
      • Different scopes
      • One scope with CSS classes
    • Adjusting timing with at
      • Same as the previous animation
      • Relative to the finishing of the previous animation
      • Absolute time
      • Labels
      • All together

• The useAnimationControls() 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 elements
    • Sharing an AnimationControls object between overrides
  • A sequence animating separate elements
    • Overrides version
  • Dynamic Start
    • Dynamic start with overrides
  • Only after mount

SVG Animations

• SVG Animations
  • All the elements
    • Filters and gradient animations triggered by events
  • Circle example

• Animating SVG Path Changes
  • There’s an easier way
  • 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

• Line Drawing
  • Extra convenience properties
    • Motion values, 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
    • Third animation: grow the path
    • Color me gradient
    • 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

Dragging

• Dragging
  • With a code override
  • In a code component

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

• Drag Constraints
  • Area example
    • Using the area of another element
      • 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
    • Sending the frame to the correct corner
    • Tracking velocity

• Drag Events
  • The drag events
  • Drag events example
  • MouseEvent and TouchEvent objects
  • PanInfo object
  • Overview example
  • How to get the position of a draggable element?
    • Using onDrag() and getBoundingClientRect()
    • Using Motion values

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

Reorder

• Reorder
  • The basics
    • Reorder.Group
    • Reorder.Item
  • <ul> or <ol>
  • No list style
    • Making the item grow and adding a shadow
  • With a code override
  • A horizontal list
  • Adding and removing items
    • Code override for the ‘add animal’ button
    • Different value for onReorder
    • Add an animal animation
    • Remove animal animation
    • Remove animal function
    • CodeSandbox version
  • Making only a part of the item draggable
  • A scrollable list

Using a Web API

• Using a Web API
  • Two versions
    • Basic version
    • Version with custom color option
  • Airtable introduction
    • Workspaces, bases and tables
    • Copying the tables
    • What’s an API?
    • Airtable.js
    • Personal Access Tokens
    • The base’s ID
  • Basic version
    • Empty state
    • Displaying the SVG
    • Talking to the API
      • About that URL
      • The base URL
      • The parameters
        • Fields
        • Filter by formula
        • Sort
        • Max records
      • Options
      • Saving the result
  • Custom color version
    • Extra property controls
      • Which color?
      • Custom color
    • Using the SVG as a mask

Animatable Properties

• Animatable Properties
  • Overview table
  • Setting some initial
  • Dimensions and position
    • Example 1: Width and height
    • Example 2: Right and bottom
    • Automatic layout animations
  • Transform
    • The smoothest animations
    • Transform origin
      • originX and originY
      • originZ
    • Rotate
      • Example 3: rotateY
    • Perspective
    • Translate
      • Example 4: Y and Z
    • Perspective origin
    • Transform perspective
      • Example 5: Y, Z, and transformPerspective
    • Scale
      • Example 6: scaleX and scaleY
    • Skew
      • Example 7: skewX
      • Example 8: skewY
      • skew
  • Opacity
    • Example 9: Opacity
  • Background
    • Example 10: background
    • Example 11: backgroundColor
    • Example 12: Radial gradient
    • Example 13: Linear gradient
  • Border
    • Example 14: Border on the canvas
    • Example 15: Border in code
    • Example 16: Initially invisible border
  • Border radius
    • Example 17: borderRadius
    • Example 18: individual border radii
  • Shadow
    • Example 19: boxShadow
  • Text
    • Example 20: textShadow
  • 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

API Overview

• API Overview
  • Framer API
  • Animation properties
    • Transition options
    • Orchestration options
  • Drag properties
    • Drag transition options
  • Events
  • Special components
  • Motion values
    • The Motion value API
  • Utilities
    • AnimationControls object

A Framer Motion Project

• A Framer Motion Project
  • Motion elements
  • Using Framer Motion
  • 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
    • Netlify
    • Vercel

• Routing
  • Client-side routing
  • Page transitions with Animate Presence
  • React Router example
    • The <BrowserRouter>
    • The content pages
    • The <Routes> container 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
    • The useRoutes() hook
    • The red one
      • From the Home page to a Gallery page
        • The Home() component’s exit animation
        • Appear animation in the Gallery() component
        • And some more appear animations in Image()
      • Returning from a Gallery page to the Home page
        • The exit animation in Gallery()
        • Appear animations in Home()
    • The purple one
      • From the Home page to a Gallery page
        • The  exit animation in Home()
        • Appear animation in Gallery()
      • Returning from a Gallery page to the Home page