Page Transitions
Create smoother movement between pages and views with transitions that maintain visual continuity, reinforce the experience and make navigation feel more intentional instead of like an abrupt change of screen.
Trending Right Now
Layout
Questions, Answered.
Which page transition should I choose for a branded route change?
Use Pixel Transition or Block Transition for graphic brands and confident launch pages. Use Svg Brush Transition when the brand has a lighter illustrated system. Use Page Flip only when the page metaphor fits the content. Use Chess Grid or Pie Rotation on simple route trees where orientation will stay clear.
Where do page transitions make the experience feel better?
Page transitions work best on creative agency websites, campaign microsites, product launches, editorial portfolios, brand journeys, and low-frequency navigation paths where continuity matters. They turn the cut between pages into a brief brand moment.
When should route transitions be avoided?
Avoid route transitions in apps with frequent navigation, dashboards, checkout, docs, search flows, and utility products where delay hurts completion. If users are trying to act quickly, the transition should get out of the way.
How long should a production page transition last?
Most page transitions should stay around 300–600ms. Longer transitions need a real loading reason. Never add fake delay just to show the animation.
How should focus behave after a page transition?
Move focus to the destination page’s main heading or main region after navigation. Do not leave focus trapped in the transition overlay, and make sure the transition layer stops blocking interaction once the route is ready.
What should the mobile version of a route transition do?
Use short fades, simple overlay reveals, or instant navigation on low-power devices. Avoid complex flips, heavy masks, and large full-screen motion when it slows down orientation.
Request a Custom Page Transition
Need a custom effect? Tell us what to create.