Chapter 57: Curtains

Core Idea

Motion's curtains() function runs stage-curtain page transitions: cover the viewport with a wipe, iris, blinds or pixel effect, swap your content while it's hidden, then reveal. A small, browser-agnostic alternative to the View Transition API for designed page transitions.

Key Concepts

• Features: First
• Install: First
• Create a page transition: curtains accepts an async update function
• Configure the animation: By default
• Mix effects: By default
• Scope to a specific element: By passing a scope value
• Sequencing: curtains() returns a promise that resolves once the reveal has finished
• Styling the curtain: Every covering element (panel
• Effects: Every effect is imported separately to remain tree-shakable for lower bundlesize.

Code Examples

import { curtains, wipe } from "motion-plus/curtains"

await curtains(
  () => await update(),
  { effect: wipe({ direction: "left", angle: 12 }) },
)

• What it demonstrates: Core usage pattern for Curtains.

Key Takeaways

1. Mix effects: Cover with one and reveal with another.
2. Tiny: Just a couple kb on top of the mini animate() function.
3. Hardware accelerated: All effects are GPU accelerated.
4. Robust: No z-index hacks, uses the browser's Popover API to ensure full-page overlay.
5. Accessible: Respects a user's prefers-reduced-motion setting.

Connects To

• Install Motion+ for JavaScript: related Motion doc page.
• animate(): related Motion doc page.
• View animations: related Motion doc page.