Tech Demos
Bag of Tricks for Astro's View Transitions

The 👜 Bag of Tricks ✨ provides components that demonstrate Astro’s View Transition API. Some of these are technical demos, some are useful tools, and some will evolve into reusable components that you can use in your own project to handle edge cases that go beyond Astro’s standard features. The code of the Bag of Tricks is on github:martrapp/astro-vtbot↗

• @vtbag/inspection-chamber

  The Inspection Chamber  →

  🔬 Put your view transitions through their paces!

• astro-vtbot/animation

  More than fade & slide  →

  🎥 Additional animations like swing() and zoom() for view transitions

• astro-vtbot/AutoNameSelected

  Image Gallery  →

  🍱 Declaratively assign view transition names to selected elements

• astro:before-preparation

  The Fish Pond  →

  🐟 Follow the swarm: view transition in different directions through a fish pond.

• astro:before-preparation

  The Carousel  →

  🎠 Navigate a ring of pages turning the carousel forward and backwards.

• astro:before-preparation astor:after-preparation

  Loading...  →

  ⏳ Add a 'loading...' indicator to your page transitions.

• astro:before-preparation loader() astro:before-swap swap()

  Ken Guru  →

  🦘 Try to catch Ken Guru while he hops around the page!.

• astro:before-swap swap()

  No Reset!  →

  🔄 Iframes and animations reset on transitions? Fear no more!

• astro:before-preparation loader()

  Morphing Links  →

  🔗 Several links on a page morph to next page's heading.

• astro:before-preparation loader()

  Image prefetch  →

  🖼️ Prefetch the hero image of the target page to have it ready when the view transition starts.

• astro:after-preparation astro:after-swap

  Do not Scroll  →

  📜 For pages with the same structure: Stay on the same scroll position when navigating between them.

• astro:after-swap

  Scroll to Top  →

  ⇱ Always scroll to the top of the page on history traversals.

• astro:before-swap viewTransition.ready

  Circular Reveal  →

  🔵 The circular animation from the page on View Transitions.

• astro:before-preparation astro:before/after-swap

  One door closes and another one opens  →

  🚪 Make all transitions go through a portal page

• astro:before-preparation

  Winter Demo  →

  ❄ Multiple transition groups and a custom animation right before and after the navigation

• astro:before-preparation loader()

  Intra-page view transitions  →

  ↩️ Navigation to anchors on the current page won't trigger view transitions, but you can add search parameters to force them.