🐫 The Cam-Shaft
The <CamShaft /> eliminates unexpected pseudo-smooth-scrolling that the default group animation of the View Transition API introduces when changing vertical scroll position on browser-native cross-document view transitions with ::view-transition-groups larger than the viewport.
This component is to be used with browser-native cross-document view transitions.
If you are using Astro’s <ViewTransitions /> component for view transitions and want to eliminate pseudo-smooth-scrolling, please use the <PageOffset /> component.
Contents
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.
You need to place the <CamShaft /> in the <head> of all the pages where you want to eliminate the pseudo-smooth-scroll effect. It’s best to insert the component in your basic layout inside the <head> element.
---import CamShaft from 'astro-vtbot/components/CamShaft.astro';---<html> <head> <CamShaft /> ... </head> ...</html>Properties
The component supports a single property that you can use to tell for which ::view-transition-group you want to eliminate pseud-smooth-scrolling. By default <CamShaft /> targets ::view-transition-groups(main) if such a group exists. But you can point it to any other view-transition-name, even to multiple names, if you separate them by spaces.
| Property | Type | Effect |
|---|---|---|
| viewTransitionNames | space separated list of view-transition-name value | The names of the view transition groups to fix. |
For example, if you want to eliminate pseudo-smooth-scrolling for both, the ::view-transition-group(content) and ::view-transition-group(aside), use the CamShaft like this:
<CamShaft viewTransitionNames="content aside" />