Chapter 8: useCurtains - Animated page transitions in React

Core Idea

Motion's useCurtains hook runs stage-curtain page transitions in React. Cover the view with a wipe, iris, blinds or pixel effect, run a state change or route navigation while it's hidden, and hold the reveal until React has committed and painted. Built for App Router navigation and Suspense.

Key Concepts

• Features: First
• Install: First
• Create a page transition: useCurtains returns a curtains function and an isPending flag:
• Configure the animation: By default
• Show a pending state: While the curtain is up and the update is in flight
• Mix effects: By default
• Scope to a specific element: By passing a scope element
• Sequencing: curtains() returns a promise that resolves once the reveal has finished
• Styling the curtain: Every covering element (panel

Code Examples

import { useCurtains } from "motion-plus/react"
import { wipe } from "motion-plus/curtains"

const [curtains, isPending] = useCurtains()

await curtains(() => router.push("/about"), {
  effect: wipe({ direction: "left", angle: 12 }),
})

• What it demonstrates: Core usage pattern for useCurtains - Animated page transitions in React.

Key Takeaways

1. useCurtains - Animated page transitions in React supports Features.
2. useCurtains - Animated page transitions in React supports Install.
3. useCurtains - Animated page transitions in React supports Create a page transition.

Connects To

• Curtains: related Motion doc page.
• Install Motion+ for React: related Motion doc page.
• animate(): related Motion doc page.
• AnimateView - Animated page transitions in React: related Motion doc page.