Issue with ClientRouter and Canvas scripts

[hardy cargo]

Hey, i have been having an issue with the ClientRouter component from astro::transitions which i believe is very similar to https://github.com/withastro/astro/issues/12780.

What's happening:
Using ClientRouter and navigating to a route and getting back to the root ( / ) the Canvas effect of appearing cells doesn't render even thought the script seem to be working.

The image you see bellow is a link to the /projects/redis page which has nothing inside of it and on the top you can see the canvas with the orange cells

if you enter to the page and get back to the root ( / ) page you can see that the canvas effect is not working and it had slide down to the projects section

After entering the link card and getting back to the root

You can see that behind the card is the Canvas element

The Details:
Both of the existing canvas on the page are wrapped by a CanvasProvider Component which the only thing it does is look for thue canvas with the ID canvas-effect and execute a function that sets up the effect of the appearing orange cells ( they can also be gray ).

It wraps two component which are the Hero and the Projects in the page respectively and at the bottom of those components is the Canvas component which just applies a gradient to the canvas, and the canvas itself

The code of this issue can be found on :
https://github.com/dyxgou/portfolio/tree/page-transitions

If you wanna see it, the relevant files are

• src/components/Canvas/Canvas.astro,
• src/components/Canvas/CanvasProvider.astro,
• src/pages/index

[tranquil burrow]

Hi @hardy cargo 👋 sorry for the late response.

i'm not able to reproduce the broken canvas.
I checked out https://github.com/dyxgou/portfolio.git and switched to the page-transition branch.
In dev as well as with build, the squares still blink when i come back from the redix page.
What am I possibly doing wrong?

ah, that version does not use the ClientRouter.

When you are using the ClientRouter you have to use the lifecycle events to re-establish handler and scripts after navigation, see: https://docs.astro.build/en/guides/view-transitions/#lifecycle-events

In your case, it might be simpler to make sure everything works as expected without the <Clientrouter /> and then use browser native view transitions with @view-transition{navigation: auto}, see https://events-3bg.pages.dev/jotter/migrate/

[hardy cargo]

Oh sorry, i didn't thought it someboddy will response jajaj

[hardy cargo]

I was thinking about something similar, but as the animation that i wanted to make is just a slide of the card, so i did it with just css, but as i said in the first message i really think that is the issue 12780 as the code is pretty similar

[hardy cargo]

Im going to try it out, but if the issue i still presist im going to try to make a replication and open up an issue in the Astro repo