⮌ back | Home

Enabling Forward and Backward Animations with Native Cross-Document View Transitions

DemoContent
Forward OnlyIf you simply replace <ClientRouter /> with <style>@view-transition{navigation: auto}</style>, the navigation will only trigger Astro’s forward animation.
Back is BackTake back control: continue using forward and backward animations of transition:animate or style your directional animations with view transition types!
Page OrderIf your site has a concept of previous and next pages, you can derive the animation direction from the order of your pages.
Forced TraversalsIf you click through a site, pages pile up in your history. How about automatically replacing forward navigation with history traversals for pages seen before?
Same Same!Special styling for links that lead to the current page
Link TypesSet view transition types per link