A brief history of the Bag of Tricks

The 👜 Bag of Tricks ✨ is a real grab bag. It began as a proof of concept, developed into a library of reusable components and has recently got more and more emphasis on explanations and instructions.

Astro View Transitions

I played with Astro’s view transitions from the day they were first supported as an experimental feature in version 2.9.0 on July 20, 2023. At the end of that month I opened the first issue and from August 1st I started contributing to the view transition feature. We further developed the feature and began planning additional lifecycle events late in October.

Level 1: Proof of Concept

With all gray theories, at some point it becomes necessary to try things out in the real world. On October 30th, the first version of the fish pond demo↗ saw the light of day! Its purpose was to test drive the new event architecture.

Not only did it play with different directions. It was also able to log the events and show the values of their properties. The first version logged to an overlay. But soon the information grew to an extend that won’t fit on the screen any more.

Tech Demos

Other demos quickly joined the fish, such as The Carousel and an Astro implementation of the Circular Reveal Demo from the original View Transition article. And Ken Guru.

Most of these had been motivated by the original discussions↗ on what we wanted to achieve with the new API. Even a first version of the loading indicator made it on the tech demo page late november↗.

Level 2: Reusable Components

Starting in December, I extracted the core mechanics of some tech demos to make reusable components. There was also a lot of input from the Discord #support channels.

The first release of The Bag, with early versions of <ReplacementSwap /> and <VTBotDebug /> landed on npm on December 11, 2023. The <Linter /> followed before the end of the year, together with the winter demo and first patches.

Community Driven Continuous Improvements

The new year brought many reusable 3D animations and generic loading indicators! Existing components just got better, especially VtBotDebug and the Linter.

Level 3: The Jotter

From the beginning, the 👜 box of tricks ✨ contained some information for developers explaining the structure of events and some tips and tricks for people using view transitions. I’m currently in the process of cleaning up this mess, adding a hopefully helpful structure and more content, tricks and articles.

This also seems to be the beginning of a Starlight era.

Level 4: @vtbag

Now that most browsers have native support for view transitions, you can use them in Astro projects independent of the <ViewTransitions /> component. To better reflect this, <ViewTransitions /> was renamed <ClientRouter /> in Astro 5.0. And this site got a sister project at https://vtbag.dev↗ that is dedicated to the use of the View Transition API independent of any given framework.