🔙 The Back Link
The BackLink component lets you flip the direction of the view transition animation when using Astro’s client router!
Contents
Why should I use this component?
Astro’s ClientRouter component support forwards and backwards animations with view transitions. This is a key feature for the built-in slide in/out animation and can also be used for custom animations like zoom in/out.
You get a forward animation when you click a normal link and you get a backward animation when traversing back through the browsers history.
These are great defaults but sometimes you want to have more control. You can listen to the lifecycle events and set the direction based on the from and to URLs of the astro:before-preparation event.
Or you grab the BackLink component and be done in a few seconds.
Usage
Install astro-vtbot in your project as an Astro integration with npx astro add astro-vtbot or as a node package with npm install astro-vtbot.
To reverse the direction of the view transition animation for a link in an .astro file, import the BackLink in the frontmatter and name it just A:
---import A from 'astro-vtbot/components/BackLink.astro';---
...<a href="...">I am a link that triggers forward animation</a><A herf="...">I am a link that triggers backward animation</A>Then use <A href="..."> instead of <a href="..."> to swap forwards with backwards animations.
If you use the browser history to traverse back over an BackLink, it shows the forward animation ;-)