Motion

Page Transition

Fade or slide between page states — smooth transitions make navigation feel connected instead of jarring.

Also called: view transition, route animation, section swap

Live demo — switch sections

Welcome to the site. Use the tabs above to navigate between sections with a smooth slide transition.

We build delightful web experiences. This panel slides in from the right while the previous fades out left.

Reach out anytime. In production, pair this with the View Transitions API for native cross-document animations.

How it works

Stack panels absolutely. On switch, add exit-left to the outgoing panel and active to the incoming one. CSS handles the rest.