React Fast Marquee breaks with Astro View Transitions

[frail blaze]

When navigating away and then coming back to a page, react-fast-marquee stops working.

The component is loaded with client:only="react" and Astro View Transitions are enabled.

What's the correct way to fix this?

[dull zodiac]

I don't use React myself, but I have experienced the same issue in the past.

It was caused by defining variables in a DOMContentLoaded event, which only fires once if you use view transitions. Use astro:page-load instead

Are you seeing any errors in your console?

[dull zodiac]

Have a look at this: https://docs.astro.build/en/guides/view-transitions/#script-behavior-with-view-transitions

[frail blaze]

can u pls guide me on how to implement that in this code:

`import Marquee from "react-fast-marquee";

export default function MarqueeTest() {
return (
<Marquee speed={40}>
<span style={{ marginRight: 24 }}>One</span>
<span style={{ marginRight: 24 }}>Two</span>
<span style={{ marginRight: 24 }}>Three</span>
</Marquee>
);
}`

[dull zodiac]

I don't use React and don't know how to solve it for you since you're not using a <script> tag.

[wheat sparrow]

Houston, we have a problem... and <@&1129102257422610512>, you’re our mission control! 🚀

[frail blaze]

no worries, thanks tho

[slate raptor]

have you tried using useEffect on your component?

⁨```jsx

const [key, setKey] = useState(0);

useEffect(() => {
const handlePageLoad = () => {
setKey(prev => prev + 1);
};

document.addEventListener('astro:page-load', handlePageLoad);

return () => {
  document.removeEventListener('astro:page-load', handlePageLoad);
};

}, []);

[frail blaze]

yes I tried that
astro:page-load does fire and the key updates but react-fast-marquee still doesn’t restart its animation when navigating back

[slate raptor]

hmmmm

[slate raptor]

it feels like that pkg is unmaintained.

the last commit was 2 years ago.

[frail blaze]

yeah but its getting 300k weekly downloads so like i thought lets use it

[slate raptor]

i see

here's an alternative

https://ui.full.dev/docs/components/marquee/

if you wanna try it

[dull zodiac]

Shadcn has a marquee too, in case you want to stick with React https://www.shadcn.io/components/layout/marquee

[arctic mesa]

It could be a regression within <ClientRouter/> anyway you could make an issue with a reproduction?

[frail blaze]

this one also using react fast marquee

[frail blaze]

this mostly works but I want a true full-width marquee. with auto-fill it stretches to the viewport but the spacing between items grows instead of repeating the content, which kinda breaks the marquee effect. any idea how to handle this properly?

[slate raptor]

i'm not getting what you mean tbh

do you have a public repo?

[knotty quiver]

Marquees are generally tricky, you usually have to duplicate or triplicate the items to make it work properly

Recently made one at work

[dull zodiac]

I made one recently but it was just an Embla carousel with autoplay. Looks like a marquee though

[knotty quiver]

I just built mine in solid, no reason for a library imo

[fiery sparrow]

can simply do it in base JS as well

[frail blaze]

with that marquee component, it doesntt repeat the items to fill the screen.
instead it just makes the space between the items bigger. because of that, the scrolling doesnt look smooth, it just looks stretched.

[frail blaze]

yea exactly i just wanna skip manually duplicating the items

[slate raptor]

did you try repeating the components to the widest screensize?

[knotty quiver]

Also keep in mind you may want to have a maximum width to your marquee

It looks really weird having it go all the way to the edges of a 4k or ultrawide resolution with the rest of the content usually being more centered

For sub 2k screens mine takes the full width but that's the biggest it gets, any bigger viewports and it fades nicely into the background at that same 2k width

[frail blaze]

that kills my use case of not duplicating , i just want auto duplication

[sweet tinsel]

Did you get a fix? I'm having a similar problem with Shadcn animations

[frail blaze]

Nah still couldn't find the fix , i just disabled view transitions

[sweet tinsel]

Damn

I could fix it but it was modifiying the shadcn components

I had a toaster -> I did it as Astro component

And I had a drawer, I just added my own animation transitions there

[frail blaze]

cool

also on the latest accordion component from shadcn the animation is missing did u check it

[sweet tinsel]

Nope, I didn't see it. I'm not using it in this project

But it can be probably be broken aswel yeah

adding this into the drawer component fixed it. if u have problems with the accordion, maybe with this you can make it work, or make some tweaks to make it work

note that the first animation will be different than the second animation when changing pages, but at least there's one