Sweep Lift Transition

Overview

Sweep Lift moves a route change through a soft lifted sweep, turning a flat cut into a smooth visual handoff.

A gentle overlay sweeps across the screen, dims the current view, and lifts the destination into focus. The transition feels calmer than a hard wipe and lighter than a full-screen cinematic sequence. It works best when the brand wants a polished route change without making navigation feel heavy.

Use Sweep Lift for portfolios, agency websites, brand homepages, campaign pages, and editorial routes where the transition should feel soft, premium, and controlled. The page job is continuity: the visitor should feel the route change without waiting for the animation to finish showing off.

The production risk is fake softness. A transition can look elegant and still hurt the experience if it delays navigation, hides the ready destination, or leaves focus behind on the previous route. Sweep Lift should be short, tied to real route state, and replaced with instant navigation or a simple fade for reduced-motion users.

(Next.js App Router only. Requires next-transition-router for route-transition lifecycle hooks and must be wrapped in its provider. This effect will not function in plain React or in the Next.js Pages Router.)

Install Command

Usage Code

Component Code

Example Production Use Case

A brand studio can use Sweep Lift between portfolio and service routes to make the site feel calm and premium. The old page softens, the transition lifts into the next view, and the visitor lands on the destination content without losing orientation. The outcome is polish: navigation feels designed without becoming a loading screen.

Best Used For

• Portfolio and agency websites where route changes should feel soft and premium.
• Campaign pages where a gradient sweep matches the visual direction.
• Brand-led routes where navigation needs a subtle handoff rather than a hard cut.

Not For

Not for dashboards, docs, checkout, search, forms, or product flows where fast repeated navigation matters more than motion.

Not for routes where users bounce between pages frequently and would see the same sweep too often.

Performance Budget

Keep duration short, animate transform and opacity, avoid layout reads during route change, and clean up listeners or timelines after completion. Use the sweep as a composited overlay, not as a layout-level interruption.

Accessibility and Mobile

Move focus to the destination main region or heading after navigation. On mobile, reduce travel distance and avoid heavy full-screen motion. Reduced-motion users should get instant navigation or a short fade.

Common Mistakes

• Using Sweep Lift as a fake loading delay.
• Letting the overlay stay after the destination is ready.
• Forgetting focus restoration after navigation.
• Making the sweep so soft that route change state becomes unclear.