Chapter 38: useAnimate

Core Idea

Manually start and control animations, scoped to the current React component.

Key Concepts

• Scroll-triggered animations: Animations can be triggered when the scope scrolls into view by combining useAnimate with useInView.
• Exit animations: It's possible to compose your own exit animations when a component is removed using useAni
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

function Component() {
  const [scope, animate] = useAnimate()

  useEffect(() => {
    // This "li" selector will only select children
    // of the element that receives `scope`.
    animate("li", { opacity: 1 })
  })
  
  return <ul ref={scope}>{children}</ul>
}

• What it demonstrates: Core usage pattern for useAnimate.

Key Takeaways

1. useAnimate supports Scroll-triggered animations.
2. useAnimate supports Exit animations.
3. useAnimate supports Stay in the loop..

Connects To

• animate(): related Motion doc page.
• Motion Values: related Motion doc page.
• React transitions: related Motion doc page.
• useInView: related Motion doc page.
• Cursor: Floating target example & tutorial for React: related Motion doc page.