-
-
-
+
## PREREQUISITE
@@ -78,16 +65,12 @@ If you want to use the ElementCrossing with an Astro project, see [astro-vtbot](
To use the Element Crossing, you can install the npm package in your project. Alternatively you can load the script from one of the global content delivery networks that provide npm packages.
-import { Tabs, TabItem } from "@astrojs/starlight/components";
-
-
-
-
+
Transfer selected element states across cross-document view transitions.
The Element Crossing allows you to preserve state of the elements of your current page and carry it over to the next page when using cross-document view transitions.
This also works independent of view transitions as long as all pages have the same origin. Tag your DOM elements for crossing and find their current dynamic state on the next page.
-
-
-
-
-
+
-
-
+
The Inspection Chamber allows you to examine the details of view transitions. It’s designed for use during development and supports both same-document and cross-document view transitions.
Place your pages in the Inspection Chamber and put the view transitions through their paces.
You can thoroughly examine each transition: play it in slow motion, examine timings and CSS values step-by-step, disable transitions or highlight the pseudo elements — everything is easily achievable here.
-
-
-
[See it in action!](/inspection-chamber-demo/first-page/)
@@ -49,16 +35,12 @@ If you want to use the Inspection Chamber with an Astro project, see [astro-vtbo
To start up the Inspection Chamber on your pages, you can install the npm package in your project. Alternatively you can load the script from one of the global content delivery networks that provide npm packages.
-import { Tabs, TabItem } from "@astrojs/starlight/components";
-
-
-
-
-1. Install `@vtbag/inspection-chamber@latest` from npm.
+
+1. Install `@vtbag/inspection-chamber` from npm.
2. In your project, add `@vtbag/inspection-chamber/lib/index.js` as an inline script at the beginning of the `` element on all pages that use view transitions.
-Details depend on your project setup and the frameworks used, but it can be as simple as:
+Details depend on your project setup and the frameworks used, but with a bundler like `vite` it can be as simple as:
```jsx
import chamber from "@vtbag/inspection-chamber?url";
@@ -69,38 +51,8 @@ import chamber from "@vtbag/inspection-chamber?url";
...
...
-;
-```
-
-
-
-You can load the script from CDNs such as jsdelivr.net or unpkg.com. Place the script inline at the beginning of the `` element on all pages that use view transitions.
-
-Using `jsdeliver.net`:
-
-```html
-
-
-
- ...
-
- ...
-
-```
-
-or alternatively using `unpkg.com`:
-
-```html
-
-
-
- ...
-
- ...
```
-
-
## Inspection Modes
diff --git a/src/content/docs/tools/turn-signal.mdx b/src/content/docs/tools/turn-signal.mdx
index 5d51c45..b048a7b 100644
--- a/src/content/docs/tools/turn-signal.mdx
+++ b/src/content/docs/tools/turn-signal.mdx
@@ -3,28 +3,16 @@ title: The Turn-Signal
description: "@vtbag/turn-signal simplifies directional (back/forward) view transitions for intuitive history traversal navigation."
---
import { Steps } from "@astrojs/starlight/components";
+import Logo from "../../../components/Logo.astro";
+import signal from "../../../assets/signal.png"
-
-
-
-1. Install `@vtbag/turn-signal@latest` from npm.
+
+1. Install `@vtbag/turn-signal` from npm.
2. In your project, add `@vtbag/turn-signal/index.js` as an inline script at the beginning of the `` element on all pages of your site.
-Details depend on your project setup and the frameworks used, but it can be as simple as:
+Details depend on your project setup and the frameworks used, but with a bundler like `vite` it can be as simple as:
```jsx
import signal from "@vtbag/turn-signal?url";
@@ -71,38 +55,8 @@ import signal from "@vtbag/turn-signal?url";
...
...
-;
-```
-
-
-
-You can load the script from CDNs such as jsdelivr.net or unpkg.com. Place the script inline at the beginning of the `` element on all pages where you want to retrieve or restore state during navigation.
-
-Using `jsdeliver.net`:
-
-```html
-
-
-
- ...
-
- ...
-
-```
-
-or alternatively using `unpkg.com`:
-
-```html
-
-
-
- ...
-
- ...
```
-
-
### Forced Traversal
@@ -112,29 +66,40 @@ Users may be annoyed when a website messes up their history entries, but there a
The `forced-traversal` feature is not covered by the example above. But the there is another demo on the [astro-vtbot-website](https://events-3bg.page.dev/signal-demo/forcedTraversal/blog/) that demonstrates the replacement.
-use it in the same way as the main script:
+Use this script in the same way as the main script by inserting it inside the ``.
```jsx
import forcedTraversal from "@vtbag/turn-signal/forced-traversal?url"
...
-
-```
-or
-```html
-
+
+
```
There are no configuration options and the `forced-traversal` script does not take any parameters.
## Configuration and Usage
-`@vtbag/turn-signal` main script accepts several config options. Those are specified as `data-*` attributes on the `
+```
+Here the first CSS selector selects the home page and the second all pages from the global site navigation. This selector will fit for all Starlight sites.
+
+For a detailed description of `data-selector` and on how to instruct Turn-Style to set different types or even set attributes on the root element, see the [config options](/config/options/) below.
+
+Let's see how you can use these view transition types to style different animations dependent on the direction of the navigation or even switch transition groups on and off.
### CSS for Reverse Animation
Chances are more often then not that you can not simply revert the direction of your animation for the `backward` effect. Assume you have `slideOutToLeft` for the old image and `slideInFromRight` for the new image.
-```css
+
+```css title="Example for forward animations"
::view-transition-old(main) {
animation-name: slideOutToLeft;
}
@@ -154,7 +119,8 @@ Chances are more often then not that you can not simply revert the direction of
}
```
Just changing the direction of the animations would lead to something best named `slideInFromLeft` for the old image and `slideOutToRight` for the new image. While the animations are about right, just setting `animation-direction: reverse` would apply them to the wrong images. You do not want to slide in the old image or slide out the new image. So better you swap the keyframes, too …
-```css
+
+```css title="Example for fitting backward animations"
:active-view-transition-type(backward) {
&::view-transition-old(main) {
animation-name: slideInFromRight;
@@ -166,16 +132,38 @@ Just changing the direction of the animations would lead to something best named
}
}
```
-… or even explicitly define keyframes for slideOutToRight and slideInFromLeft if you feel that is clearer.
+… or even explicitly define keyframes for `slideOutToRight` and `slideInFromLeft` if you feel that is clearer.
+
+… and you can also define different animations for `:active-view-transition-type(same)`, i.e. for links to the current page, e.g. in a navigation bar by using the same pattern.
+
+### Switching Transition Names
+
+Transition types and direction attributes are determined on the old page and the new page of the cross-document view transition. Even though CSS for animating cross-document view transitions is [always taken from the new page](/tips/css/#animations), there is an important use case for directions on the old page: You can exclude elements from view transitions depending on the direction. With directions on the old page you can not only exclude new images but also old images!
+
+```css title="How to switch off a view transition group based on direction"
+main {
+ view-transition-name: main; /* for forward and backward slides */
+}
+
+:active-view-transition-type(same) main {
+ view-transition-name: none; /* but no transition for links to the same page */
+}
+```
+
+The Turn-Signal also always sets view transition type `old` on the old page and `new` on the new page. So you can be even more specific:
+
+```css title="How to switch off the old image, only"
+:active-view-transition-type(same):active-view-transition-type(old) main {
+ view-transition-name: none; /* but only a new image for links to the same page */
+}
+```
-… and you can also define different animations for `:active-view-transition-type(same)`, i.e. for links to the current page, e.g. in a navigation bar.
### Config Options
|Config option|Type|Effect|
|--|--|--|
|data-selector|a CSS selector|
-
-
-
+
+
## PREREQUISITE
@@ -52,16 +40,12 @@ If you want to use the TurnSignal with an Astro project, see [astro-vtbot](https
To use the Turn-Signal, you can install the npm package in your project. Alternatively you can load the script from one of the global content delivery networks that provide npm packages.
-import { Tabs, TabItem } from "@astrojs/starlight/components";
-
-
-
-
+
Backward/forward view transitions for intuitive history navigation.
The Turn-Signal is a lightweight script for purely progressive enhancement of cross-document view transitions. It detects the direction of browser navigation and signal it with view transition types or html attributes to guide directional styling. This enables developers to create smooth, responsive transitions that adjust based on forward or backward navigation, delivering a more intuitive user experience.
-
-If your site has a concept of _previous_ and _next_ page, use this to tell the Turn-Signal about your pages and their order. One selector _to find them all_.
The selector should return one element per page of your site, and each element must have an href attribute. Typically, you would select `` elements from your navigation bar, such as `data-selector="nav a"`.
If your site doesn't already have a suitable structure, consider generating a list of pages in a non-intrusive way. For example, you could use `` elements inside a `` element or `` elements with a custom `rel` attribute.
The sequence of selected URLs is used to derive the navigation direction. Navigation to a page that comes later in the sequence of selected URLs will be a _forward_ navigation. Navigation to a page that comes earlier in the sequence of selected URLs will be a _backward_ navigation.
| -|data-direction-types|backward-value, same-value, forward-value|The Turn-Signal sets view transition types to convey the derived direction in a form that can easily be used for styling your animations.
By default, the types are `backward`, `same`, and `forward`, i.e. as if set using `data-direction-types="backward, same, forward"`.
An alternative would be `data-direction-types="reverse,,"` This would do nothing for same page and forward navigation, but would set the `reverse` type on backward navigation.
+|data-direction-types|backward-value, same-value, forward-value|The Turn-Signal sets view transition types to convey the derived direction in a form that can easily be used for styling your animations.
By default, the types are `backward`, `same`, and `forward`, i.e. as if set using `data-direction-types="backward, same, forward"`.
An alternative would be `data-direction-types="reverse,,"` This would do nothing for same page and forward navigation, but would set the `reverse` type on backward navigation.
On the old page, the Turn-Signal also sets a type called `old` and on the new page it sets a type called `new`. This behavior can not be customized.
|data-direction-attribute|attribute-name, backward-value, same-value, forward-value|For compatibility with existing code you might want to use attributes rather than view transition types to select different styling for your animations.
You can specify what attribute to use and what values to set. Here is an example of how to make Turn-Signal directions compatible with th CSS Astro generates for `transition:animate`: `data-direction-attribute="data-astro-transition, back, forward, forward"`.
-