Reusable Components

The Inspection Chamber lets you examine all the visual details of the view transitions of your pages.

Check what's going on in slow motion or move to specific time frames in your animations. During analysis, switch the pseudo elements on and off to get a better glance at the details.

Status

Bleeding edge, stabilizing.

Future direction

• Fix bugs and extend functionality

For Astro projects that use browser-native cross-document view transitions instead of Astro's <ViewTransitions/>.

Bump and nudge the images of large view-transition-group pseudo-elements to avoid pseudo-smooth-scrolling.

This Astro component integrates @vtbag/cam-shaft.

Status

Brand new

Future direction

• Find bugs and fix them

For Astro projects that use browser native cross-document view transitions instead of Astro's <ViewTransitions/>.

Transfer selected element state across cross-document view transitions for a really smooth look and feel.

This Astro component integrates @vtbag/element-crossing.

Status

New, in parts a bit over-the-edge

Future direction

• Fix bugs and extend functionality

For Astro projects that use browser native cross-document view transitions instead of Astro's <ViewTransitions />. Makes transition:animate work with cross-document @view-transition{navigation: auto}

This Astro component integrates @vtbag/turn-signal.

Status

Brand new

Future direction

• Fix bugs and extend functionality

Have you often wondered if the app has noticed the click in apps that use view transitions? Or have you ever been annoyed and clicked on a link several times because nothing seemed to happen?

Then you need an indicator that gives you visual feedback that the app is working.

Status

• <ProgressBar /> & < LoadingIndicator />
• Support for easily creating custom components, such as spinners and similar elements.

VtBotDebug is a component that helps to understand transition events. It logs the events, their properties, and the overall timing during the processing to the browser console.

Status

Feature complete for the logging part and ready to use.

Future direction

• Good to go as is

This component checks for typical problems during development of view transitions and gives detailed error messages. The main checks are

• Whether identifiers are used correctly with transition:persist and data-vtbot-replace
• Whether view-transition-names and script types have correct values

Status

Reliable and ready to use.

Future direction

• Add additional checks for typical issues.

The ReplacementSwap component changes how the new page replaces the DOM of the old page during view transitions. It only replaces the parts that are marked for replacement. Hence the name.

It allows you to keep headers and footers including their event listeners and only change the main area of your page. It can also solve the problem that view transitions lose the content of persisted iframes and the state of animations on transitions.

Status

Reliable and ready to use.

Future direction

• Find and resolve potential bugs.

This component removes the pseudo-scrolling effect introduced by morph animations of elements that are larger than the viewport.

Get a smooth, worry free transition that looks great even on large, scrolled down pages.

Status

Used in the Jotter to steady page changes.

Future direction

• Accepting suggestions ;-)

The AutoNameSelected component allows you to automatically assign view-transition-name properties in a declarative way using CSS selectors.

Name all your headings or images to add automatic morph effects to your navigation.

Status

Used in the Jotter to morph headings.

Future direction

• Additional config required?
• Extend with transition classes?

Zoom offers animation effects for view transitions. It can be used as a replacement for the standard Astro animations fade() and slide().

Zoom animations can enlarge the current transition group or shrink it to a point. And the zooming can be combined with a fade effect.

Status

Ready to use, see demos.

Future direction

• Harden implementation

Swing offers animation effects similar to Zoom. The effects allow rotations around all axis in 3D space.

The effect can be used as a drop-in replacement for fade() and slide() but also offers extensive parameters for configuration.

Status

Ready to use, see demos!

Future direction

• Show more parametrization in demos

Move is the newest addition to the animation effects. It offers a wide range of effects. The basic idea is to have two connected edges along which the old image is moved out and another two connected edges along which the new image is moved in.

The effect can be used as a drop-in replacement for fade() and slide() but also offers extensive parameters for configuration.

Status

Ready to use, see demos!

Future direction

• Show more parametrization in demos

Sometimes you want to opt out of the default scroll behavior of navigation.

Putting the <NoScroll> component in the <head> of your page prevents scrolling on transitions. The vertical and horizontal scroll positions just stay where the are before you clicked a link.

Status

Used on several additional demos including image gallery and the animation demos.

Future direction

• Do we need properties for more fine grained control?

This component forces a full page load of the target for incoming view transition.

This makes it the perfect sidekick for the ReplacementSwap component.

Never again worry about how to reinitialize the app area for incoming view transitions.

Status

Used by the Jotter.

Future direction

• Factor out configuration

Do you use a navigation bar with view transitions and find it frustrating when the cursor changes from pointer to default during navigation? Take back control of your cursor!

Status

Brand new, but (mostly) harmless.

Future direction

• May add some configuration

ViewAudio Transitions!

Listen to the cranking noises from deep inside the machine as the next page is loaded, prepared and animated.

Quickly check which audio files you have got to annoy your visitors!

Not the most serious trick from The Bag. But a fun example of what you can do with the API.

Status

Used by the Jotter.

Future direction

• I haven't the faintest idea!

This is a component that can generate style sheets for view transition animations. This works for native view transitions and for Astro's view transition simulation for browsers that do not support them natively.

This component is used together with the functions offered by animation-style.ts

Status

Used as part of the Zoom and Swing components.

Future direction

• Add more utility functions

The Portal forces all navigation through a single intermediate page. This page can be used to show some loading animation. The transition automatically resumes to the target page of the transition once that page is loaded.

The benefit of a portal page is that the animation effect can be confined on that very page. A limitation compared to *pure* view transitions is that persisted elements and transition groups from the current page to the target page are only possible if those are also supported by the portal page.

Status

Proof of concept.

Future direction

• Add properties for more fine grained control

As a developer, you want to define and control how your website behaves on slow connections. The <BrakePad> component gives you control over when and how to simulate slow loading. By default, the brake pad is a DEV mode only feature.

But you can also switch it active for production if you want to force some delay during view transitions. Admittedly, you typically want transitions to be slick and snappy. So this is a bit of a niche feature, but it can be very helpful for testing and debugging.

Status

Reliable and ready to use.

Future direction

• Do we need additional properties for more fine grained control?