Problem with ScollSmoother and Astro View Transitions

[Ignatix]

I have a demo here, when first start the ScrollSmoother works fine. But when you go to test page or back again to the index page, ScrollSmoother stop working.

https://stackblitz.com/edit/withastro-astro-fagmum?file=src%2Flayouts%2FLayout.astro

Thanks !!!

[Rodrigo]

Hi @Ignatix and welcome to the GSAP Forums!

 

This is not a GSAP related issue, but a particular wrinkle that arises when using Astros view transitions.

 

This threads should help:

 

 

Happy Tweening!

[Ignatix]

Hi @Rodrigo that solution is not working, when you navigate the scroll dissapear from the browser. Astro is removing the body styles with the viewTransitions

[Rodrigo]

Hi,

 

Hopefully this demo helps:

https://stackblitz.com/edit/github-2hpcon-yct8bb?file=src%2Fcomponents%2FLayout.astro

 

Happy Tweening!

[Ignatix]

@Rodrigo your demo is working but you have viewTransitions disable, im looking to get viewTransitions enable. Thanks !!

[Rodrigo]

I know, the idea is a way to enable/disable or destroy/create the ScrollSmoother instance on a route change. My objective is to share that particular approach, give you an idea of how to proceed:

 

import ScrollTrigger from "gsap-trial/ScrollTrigger";
import ScrollSmoother from "gsap-trial/ScrollSmoother";
import {gsap} from "gsap"


gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

const constructScroller = () => {

  ScrollSmoother.create({
    smooth: 1
  })
}

document.addEventListener("astro:page-load", constructScroller)
document.addEventListener("DOMContentLoaded", constructScroller);

Hopefully this helps.

Happy Tweening!

[Ignatix]

Yes, I know, the problem I'm facing is exactly that. With viewTransition, it doesn't work, but without it, ScrollSmoother works perfectly. However, viewTransition is an important part of the site's flow and design.

[Rodrigo]

Are you using that approach in your layout file in astro? In your demo I don't see that.

 

That basically seems to be something Astro is doing behind the scenes. ScrollSmoother works without any issues with Next, Nuxt, SvelteKit and other SSR systems. If with that approach it doesn't work honestly IDK what to tell you.

 

Sorry I can't be of more assistance.

Happy Tweening!

[Ignatix]

@Rodrigo Finally i have to calculate again de height of the body on astro:page-load, bc it keeps deleting all the gsap styles on the body

[Rodrigo]

Hi,

 

It's a shame that Astro works like that, but is great that you manage to solve it! 🥳

 

Finally thanks for sharing your solution with the community, I'm sure your generosity will help many users in the community 💚

 

Happy Tweening!