Table of contents

Jump to:

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

Framer for Developers

• Framer for Developers
  • What’s new?
  • The changes
  • In Code Components
    • No need to import React
    • Drop the <Frame>
    • Importing Framer Motion
    • But what about <Stack>?
    • And <Page>? And <Scroll>?
    • Pass some style
    • Importing smart components
    • Importing another code component
      • Versioning
      • Local import
    • Importing external components or libraries
    • Sharing a code component
      • Export as default
  • In Code Overrides
    • Higher-order components
      • A component that returns a component
      • Pass along the props
      • ComponentType instead of Override
    • Importing Framer Motion
    • Passing visual properties to style
    • Sharing data between overrides
      • CreateStore introduction
      • Don’t drop Data just yet.

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. Reading the color used on the canvas
    • Logging properties to the console
  • 5. Getting a smart component’s initial value
  • 6. 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
  • The legacy Data object
    • Add an observer
  • 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 Smart Components
  • Changing the current variant
  • Changing variables
    • Can you override other properties?
      • CSS style properties
      • Framer Motion animation properties
  • Overriding events
    • Event variables
    • Native browser events
    • Events example
      • How are the widgets animated?
      • Switching to another variant automatically
  • Example Home app prototype
    • The smart 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
  • Page + Progress example
  • 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
    • Smart 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 Smart, Code, and Framer Components
    • Importing smart components
      • Local import
      • Feel free to rename
      • Handshake import
      • Team Library
    • Importing Framer components
    • Importing other code components
      • First component: The one we’re importing
      • Local import
      • Feel free to rename
      • Handshake import
        • Versioning
      • Team Library
        • Export as default
      • 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
  • Legacy Imports
    • Importing components from public packages
    • Importing design components
      • Design components inside virtual folders

• Customizing an Existing Component
  • Customizing a built-in component
  • Customizing a component from a legacy package
    • With the legacy Framer Desktop app for Mac
      • Components that use external libraries
      • Components that use other files from the same package
    • Using Yarn with a .framerx file

• 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
        • 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>

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
  • Setting initial to 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 custom with overrides

• 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 – Code component version
    • Example 2 – Code override version
  • Multiple properties
  • Using useState() purely for… state
    • First version: Separate useState() hooks
    • Second version: Only one useState() hook

• Animate Presence
  • 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
  • Exit before enter
  • Canceling the initial mount animation
  • onExitComplete()
  • Rotating rotateY with an adjusted originZ
  • Dynamic variants
    • <AnimatePresence>’s custom property

• 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
    • Disabling the initial animation

• 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 animating separate elements
    • 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

• 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

• 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 to a Scroll Position
  • Reading the current scroll position
    • With a non-native scroll
    • With a native scroll
      • Scrolling horizontally?
  • Animating to a scroll offset with animate()
    • With a non-native scroll
      • Resetting the scroll offset on mount
      • Animating to a scroll position
    • With a native scroll
      • Updating the offset with onScroll()
  • Adding events to animate()
    • With a non-native scroll
    • With a native scroll

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

• Example Animations
  1. Tween
  2. Spring
  3. Duration-based spring
  4. Repeat
  5. Reverse
  6. While hover
  7. While tap
  8. While drag
  9. Cycling through states
  10. Animation sequence
  11. Drag: Constraints
  12. Drag: Direction locking
  13. Drag: Transform
  14. Drag: 3D transform
  15. Scroll: Progress
  16. Scroll: Refresh
  17. Page: Indicators
  18. Page: Effects
  19. Scroll and Page combined
  20. SVG path length
  21. Keyframes: Position and color
  22. Keyframes: Morphing an SVG path
  23. Colors: Keyframe animation
  24. Colors: Interpolation
  25. Colors: Switching between states
  26. Tracking the cursor
  27. Variants: Animation propagation
  28. Variants: Staggered animation
  29. Cycling parent and child variants
  30. SVG gradient animation
  31. Animate Presence
  32. Animate Presence: Stack 3D
  33. Layout animation
  34. Swapping elements
  35. Swipe to delete

Framer Motion

• Framer Motion
  • 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

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

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

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

• 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 examples with React Router 5
    • 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 are like a 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
  • 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
      • Status Bar component
    • Health app
    • iTunes Store – Code version
      • Importing a code component from a legacy package
    • iTunes Store – Smart component version

Dragging

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

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

• 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
    • Tracking velocity
    • Sending the frame to the correct corner

• Drag Events
  • The 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

• Overriding Design Components
  • Only in legacy projects
  • Overriding component instances
    • Overriding custom properties
    • Overriding common properties
  • Overriding the primary
  • Cloning child frames

• Overriding Code Components
  • Public packages
  • 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
      • Chart data
      • Override for the radio buttons
      • Override for the chart
    • More examples
  • Even more properties
    • Just wrap it

• 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