Table of Contents

  Introduction

• Motion elements
• The <motion> component
• Installation

  Some Examples

  The Main Properties

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

  Gesture Animations

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

  Variants

• Basic use
• Animation propagation
• Animation orchestration
  • Example 1: delayChildren and staggerChildren
  • Example 2: staggerDirection and when
• Dynamic variants
  • The custom property

  Keyframes

• Keyframes example
  • For tween curves
• A simpler example
• Two properties simultaneously
• Inserting a pause
• Adjusting timing with times
• Fast start, slow ending
• Different easings

  Animation Types

• 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

• Conditional rendering
• Animate presence
  • How does this work?
• Multiple children
• Same div, different key
• 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

• 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

  Motion Values

  Manual Controls

  SVG Animations

  Dragging

  Reorder

• The basics
  • Reorder.Group
  • Reorder.Item
• <ul> or <ol>
• No list style
  • Making the item grow and adding a shadow
• A horizontal list
• Adding and removing items
  • Adding an animal
  • Adding an animal animation
  • Removing an animal
  • Removing an animal animation
• Making only a part of the item draggable
• A scrollable list

  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

  Animatable Properties

• Overview table
• Setting some initial
• Dimensions and position
  • Example 1: Width and height
  • Example 2: Left and top
  • 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: No initial border
  • Example 15: With initial border
  • Example 16: Inline border
• Border radius
  • Example 17: borderRadius
  • Example 18: Individual border radii
• Shadow
  • Example 19: boxShadow
• Text
  • Example 20: textShadow
  • Example 21: color
• Filters
  • Example 22: Drop shadow
  • Example 23: Opacity
  • Example 24: Blur
  • Example 25: Brightness
  • Example 26: Contrast
  • Example 27: Grayscale
  • Example 28: Hue rotate
  • Example 29: Invert
  • Example 30: Saturate
  • Example 31: Sepia
  • Combining filters
  • Example 32: Backdrop filter

  API Overview

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