⮌ back | Overview | Home

🔬 The Inspection Chamber

With the <InspectionChamber /> component, you can put your view transitions through their paces.

Contents

Why should I use this component?

Even with your browser’s development tools, examining and evaluating the details of your view transition animations can be challenging. The inspection chamber provides all the buttons and sliders you need to pinpoint and solve any issues.

How Does it Work?

The Inspection Chamber wraps around your page and adds a control panel that you can use to examine your view transition animations. The Inspection Chamber of the bot Bag of Tricks is the Astro version of the @vtbag/InspectionChamber. Please see the documentation there↗ for further information.

The @vtbag/InspectionChamber features a demo that works with pure CSS↗ view transitions. Here is the same demo using Astro’s <ViewTranisions />

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.

If you have selected the integration, you can open the inspection chamber with the Astro DevToolbar. If you have installed the package directly without the integration, you need to place the <InspectionChamber /> component on the pages where you want to examine the view transitions. For cross-document transitions, the component must be present on both the old and the new page. It’s best to insert the component in your basic layout after the <ViewTransitions /> component.

MyLayout.astro
1
---
2
import { ViewTransitions } from 'astro:transitions';
3
import InspectionChamber from 'astro-vtbot/components/InspectionChamber.astro';
4
---
5
<html>
6
  <head>
7
    <ViewTransitions />
8
    <InspectionChamber />
9
    ...
10
  </head>
11
  ...
12
</html>

Properties

The component has no properties.