Reusable Components

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

• Fix bugs and extend functionality

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

Ready to use

Future direction

• Add additional checks for typical issues.

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 has responded: The loading indicator!

Status

Base functionality and default behavior released.

Future direction

• Offer "Custom loading indicators" to support different styles and as examples for further custom contributions

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

Just got a new property!

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.

Future direction

• Accepting suggestions ;-)

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

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

Not bulletproof yet.

Future direction

• Add properties for more fine grained control

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

Brand new.

Future direction

• Do we need 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

New but reliable

Future direction

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