I need some help with my script not being rerun on navigation.
I am using ViewTransitions, and rendering a canvas. The script sets the canvas on initial load, but when you navigate to another page and back it does not run/show.
#Script not being rerun on navigation
burnt storm
rancid topaz
Do you have an example?
burnt storm
This is my current code:
<BaseLayout title={title} description={description} permalink={permalink}>
<div class="m-auto text-center">
<h1 class="text-4xl">Andreas Sandvik Solli</h1>
<Icon name="svg-spinners:90-ring" size="100" class="m-auto pt-10" />
</div>
<div id="game" class="w-full h-screen block fixed top-0 left-0" style="visibility: hidden">
<canvas id="canvas3d" width="100vw" height="100vh" class="m-0 block fixed top-0 left-0 bottom-0 right-0"></canvas>
</div>
</BaseLayout>
<script>
import { Application } from '@splinetool/runtime';
const canvas = document.getElementById('canvas3d') as HTMLCanvasElement;
const app = new Application(canvas);
const currentTheme = localStorage.getItem('theme'); // Retrieve the current theme
const variables = currentTheme === 'dark' ? {night:100, day: 0} : {night: 0, day: 100};
const color = currentTheme === 'dark' ? '#455475' : '#F6E1AC';
app.load('/assets/scene.splinecode')
.then(() => {
app.setVariables(variables); // Set the initial variables based on the current theme
app.setBackgroundColor(color);
canvas.style.backgroundColor = 'transparent'; // Remove the initial background color
const colorSwitch = document.getElementById('color-switch');
colorSwitch.addEventListener('click', () => {
const currentTheme = localStorage.getItem('theme');
const color = currentTheme === 'theme-light' ? '#455475' : '#F6E1AC';
const variables = currentTheme === 'theme-light' ? {night:100, day: 0} : {night: 0, day: 100}
app.setVariables(variables);
app.setBackgroundColor(color);
});
// Remove the spinner and show the canvas
const game = document.getElementById('game');
game.style.visibility = 'visible';
});
</script>
It runs once on initial load, but I can't get it to load on revisit after navigation
pulsar wagon
If you haven't already, check out:
https://docs.astro.build/en/guides/view-transitions/#script-behavior-with-view-transitions
rancid topaz
^