Skip to content

Commit

Permalink
fine tuning
Browse files Browse the repository at this point in the history
  • Loading branch information
martrapp committed Dec 30, 2024
1 parent 884cd72 commit 03cc581
Show file tree
Hide file tree
Showing 8 changed files with 177 additions and 138 deletions.
2 changes: 1 addition & 1 deletion astro.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import type { Badge } from 'node_modules/@astrojs/starlight/schemas/badge';
// https://astro.build/config
export default defineConfig({
image: { remotePatterns: [{ protocol: "https" }] },
devToolbar: { enabled: true },
devToolbar: { enabled: false },
site: 'https://vtbag.dev',
compressHTML: false,
redirects: {
Expand Down
Binary file added public/image-viewer-og.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 28 additions & 6 deletions src/content/docs/tools/turn-signal.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,21 @@ import Logo from "../../../components/Logo.astro";
import CTA from "../../../components/CTA.astro";
import signal from "../../../assets/signal.png";

<style>{`
:active-view-transition-type(old) #signal {
view-transition-name: signal;
}
:active-view-transition-type(old) #viewer {
view-transition-name: viewer;
}
:active-view-transition-type(old) #fishpond {
view-transition-name: panel;
}
:active-view-transition-type(old) #forced {
view-transition-name: forced;
}
`}</style>

<Logo alt="The Turn-Signal" image={signal}>
Backward/forward view transitions for intuitive history navigation.

Expand All @@ -39,23 +54,25 @@ import { CardGrid } from "@astrojs/starlight/components";

<CardGrid>
<Card title="Turn-Signal Demo">
<span class="light:sl-hidden">![Turn Signal Demo](@/pages/demo-explainer/_TurnSignalDemo-dark.png)</span>
<span class="dark:sl-hidden">![Turn Signal Demo](@/pages/demo-explainer/_TurnSignalDemo-light.png)</span>
<div id="signal">[<span class="light:sl-hidden">![Turn Signal Demo](@/pages/demo-explainer/_TurnSignalDemo-dark.png)</span><span class="dark:sl-hidden">![Turn Signal Demo](@/pages/demo-explainer/_TurnSignalDemo-light.png)</span>](/signal-demo/bag/)</div>
Try the [Turn-Signal Demo](/signal-demo/bag/) to see the _directions script_ in action. Click on the icons to navigate the pages. Then use your browser's back button to return.

Notice how the slide animation changes direction based on the order of the pages.

</Card>

<Card title="Image Viewer Demo">
<span>![Image Viewer Demo](@/assets/viewer-demo.png)</span>

<div id="viewer">[![Image Viewer Demo](@/assets/viewer-demo.png)](/viewer-demo/)</div>

The [Image Viewer Demo](/viewer-demo/) showcases various animations for the same page: sliding from right or left, resizing, and changing its aspect ratio.

Thanks to the _link-types_ script, you can control which animation to use by adding annotations to the links that navigate to the page.

</Card>

<Card title="Fish Pond Demo">
<span>![Fishpond Demo](@/assets/pond.png)</span>
<div id="fishpond">[![Fishpond Demo](@/assets/pond.png)](/link-demo/)</div>

Looking for a more dramatic example of how to control view transition types with your links?

Expand All @@ -66,11 +83,12 @@ Explore the pond to learn more about how the demo was implemented.
</Card>

<Card title="Forced Traversal">
<span>![forced navigatiom](@/assets/ft.png)</span>

<div id="forced">[![forced navigatiom](@/assets/ft.png)](https://events-3bg.pages.dev/signal-demo/forcedTraversal/blog/)</div>

To see the _forced traversal_ script in action alongside the _directions script_, head over to the [Vtbot Demo](https://events-3bg.pages.dev/signal-demo/forcedTraversal/blog/)! No matter how many times you click the tabs in the header, your browser history will always have just three or less entries.

You can skip the Astro-specific details on the demo page. Script details are explained [below](#forced-transition)
You can skip the Astro-specific details on the demo page. Script details are explained [below](#forced-traversal)

</Card>

Expand Down Expand Up @@ -163,6 +181,10 @@ Like the _directions script_, the _link types_ script also applies the `old` typ

The `forced-traversal` script replaces forward navigation with history traversals if the target pages has been visited before.

:::note
This script only works on browser that [support the Navigation API](https://caniuse.com/mdn-api_navigation ).
:::

Users may be annoyed when a website messes up their history entries, but there are situations where replacing navigation with traversals has its appeal. Use at your own discretion.

There are no configuration options and the `forced-traversal` script does not take any parameters.
Expand Down
43 changes: 31 additions & 12 deletions src/pages/link-demo/_Layout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,41 @@ interface Props {
const { title } = Astro.props;
---

<BaseLayout {title} description="Tech demo on how to control your view transition types with data-attributes on your links when doing browser-native cross-document view transitions!" image="/fishpond-og.png">
<script slot="head" is:inline set:html={linkTypes}></script>
<script slot="head" is:inline src={vtn}
data-spec=".nav-btn: nav-btn-; .transition-link: transition-link-; .transition-link .content: transition-link-content-"></script>
<script slot="head" is:inline type="speculationrules">
<BaseLayout
{title}
description="Tech demo on how to control your view transition types with data-attributes on your links when doing browser-native cross-document view transitions!"
image="/fishpond-og.png"
>
<script slot="head" is:inline set:html={linkTypes} />
<script
slot="head"
is:inline
src={vtn}
data-spec=".nav-btn: nav-btn-; .transition-link: transition-link-; .transition-link .content: transition-link-content-"
></script>
<script slot="head" is:inline type="speculationrules">
{
"prerender": [
{
"prerender": [
{
"urls": ["/link-demo/", "/link-demo/0/", "/link-demo/1/", "/link-demo/2/","/link-demo/3/", "/link-demo/4/", "/link-demo/5/","/link-demo/6/", "/link-demo/7/", "/link-demo/8/"]
}
"urls": [
"/link-demo/",
"/link-demo/0/",
"/link-demo/1/",
"/link-demo/2/",
"/link-demo/3/",
"/link-demo/4/",
"/link-demo/5/",
"/link-demo/6/",
"/link-demo/7/",
"/link-demo/8/"
]
}
</script>
]
}
</script>

<slot />
</BaseLayout>
<slot />
</BaseLayout>

<style is:global>
* {
Expand Down
3 changes: 0 additions & 3 deletions src/pages/link-demo/_vt.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,6 @@
.panel > div > p {
text-wrap: pretty
}
:root {
view-transition-name: none;
}
::view-transition-group(*) {
animation-duration: 1s;
}
Expand Down
215 changes: 108 additions & 107 deletions src/pages/signal-demo/_Layout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const images = [bag, chamber, crossing, signal, shaft];
<header style="display:flex">
<div style="width: 30vw"><h2>Turn-Signal Demo</h2></div>
<div
style="width: calc(100% - 100px); display:flex; overflow: auto; align-items:center"
style="view-transition-name: signal; width: calc(100% - 100px); display:flex; overflow: auto; align-items:center"
>
{
pages.map((page, idx) => (
Expand Down Expand Up @@ -81,120 +81,121 @@ const images = [bag, chamber, crossing, signal, shaft];
</p><Bsky /><hr />
<slot />
</main>
</body><style is:global>
@view-transition {
navigation: auto;
}
@keyframes slideFromRight {
from {
transform: translateX(100vw);
}
}
@keyframes slideFromLeft {
from {
transform: translateX(-100vw);
}
}
@keyframes slideToRight {
to {
transform: translateX(100vw);
}
}
@keyframes slideToLeft {
to {
transform: translateX(-100vw);
}
}
@keyframes stepBackUp {
50% {
transform: scale(0.8);
}
}

::view-transition-old(img) {
animation: slideToLeft both 0.5s;
}
::view-transition-new(img) {
animation: slideFromRight both 0.5s;
}
<style is:global>
@view-transition {
navigation: auto;
}
@keyframes slideFromRight {
from {
transform: translateX(100vw);
}
}
@keyframes slideFromLeft {
from {
transform: translateX(-100vw);
}
}
@keyframes slideToRight {
to {
transform: translateX(100vw);
}
}
@keyframes slideToLeft {
to {
transform: translateX(-100vw);
}
}
@keyframes stepBackUp {
50% {
transform: scale(0.8);
}
}

:active-view-transition-type(backward) {
&::view-transition-old(img) {
animation: slideToRight both 0.5s;
::view-transition-old(img) {
animation: slideToLeft both 0.5s;
}
::view-transition-new(img) {
animation: slideFromRight both 0.5s;
}
&::view-transition-new(img) {
animation: slideFromLeft both 0.5s;

:active-view-transition-type(backward) {
&::view-transition-old(img) {
animation: slideToRight both 0.5s;
}
&::view-transition-new(img) {
animation: slideFromLeft both 0.5s;
}
}
}

:active-view-transition-type(same) {
&::view-transition-old(img),
&::view-transition-new(img) {
animation: stepBackUp both 0.5s;
:active-view-transition-type(same) {
&::view-transition-old(img),
&::view-transition-new(img) {
animation: stepBackUp both 0.5s;
}
}
}

::view-transition-group(img) {
overflow: clip;
}
::view-transition-group(img) {
overflow: clip;
}

body {
font-family: sans-serif;
}
header img {
mask-image: radial-gradient(
ellipse at center,
white 35%,
transparent 71%
);
}
body {
font-family: sans-serif;
}
header img {
mask-image: radial-gradient(
ellipse at center,
white 35%,
transparent 71%
);
}

a.selected {
background: radial-gradient(
circle at center,
#0008 50%,
#fff8 55%,
#0008 60%,
#0000 66%
);
}
[data-theme="dark"] a.selected {
background: radial-gradient(
circle at center,
#fff8 50%,
#0008 55%,
#fff8 60%,
#0000 66%
);
}
a.selected {
background: radial-gradient(
circle at center,
#0008 50%,
#fff8 55%,
#0008 60%,
#0000 66%
);
}
[data-theme="dark"] a.selected {
background: radial-gradient(
circle at center,
#fff8 50%,
#0008 55%,
#fff8 60%,
#0000 66%
);
}

main {
width: fit-content;
margin: 0 auto;
}
main img {
height: 66vh;
width: auto;
view-transition-name: img;
}
@media (orientation: portrait) {
main {
width: fit-content;
margin: 0 auto;
}
main img {
width: 100%;
height: auto;
margin-top: 10vh;
}
}
#back {
display: inline-block;
color: black;
border-radius: 8px;
padding: 1rem;
margin: 1rem;
background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
box-shadow: 0 4px 6px #8888;
}
hr {
border-color: #8888;
}
</style>
height: 66vh;
width: auto;
view-transition-name: img;
}
@media (orientation: portrait) {
main img {
width: 100%;
height: auto;
margin-top: 10vh;
}
}
#back {
display: inline-block;
color: black;
border-radius: 8px;
padding: 1rem;
margin: 1rem;
background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
box-shadow: 0 4px 6px #8888;
}
hr {
border-color: #8888;
}
</style>
</body>
</html>
2 changes: 1 addition & 1 deletion src/pages/viewer-demo/_Layout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const { title } = Astro.props;
<BasicLayout
{title}
description="Make each link have a different view transition animation"
image=""
image="image-viewer-og.png"
>
<script slot="head" is:inline src={linkTypes}></script>
<script slot="head" is:inline type="speculationrules">
Expand Down
Loading

0 comments on commit 03cc581

Please sign in to comment.