Jump to content
Search Community

Integration Issue with GSAP's ScrollSmoother and Astro's New View Transition API

PsychoBunny test

By PsychoBunny
in GSAP

Moderator Tag
 Share

Recommended Posts

PsychoBunny test

PsychoBunny

Posted
Posted

Hello, Im just trying to get ScrollSmoother working on astro web, with new astro view transition Api. 

During the first page load, everything work as expected. But when Im transitioning to another page, the scrollSmoother stops working.

It looks like during the initialisation of ScrollSmoother, it doesnt inject styles into the <body> tag, so there is scrollbar missing and users cant scroll the page.
I also tried to set the styles manually loke this:
  

  useEffect(() => {
    const wrapperHeight = document.getElementById("smooth-content")?.offsetHeight;
    const smoother = ScrollSmoother.create({
      smooth: 0.4,
      effects: true,
    });

    if (document) {
      document.body.style.height = `${wrapperHeight}px`;
      document.body.style.overscrollBehavior = "none";
      document.body.style.scrollBehavior = "auto";
    }

    return () => {
      smoother.kill();
      if (document) {
        document.body.style.height = "";
        document.body.style.overscrollBehavior = "";
        document.body.style.scrollBehavior = "";
      }
    };
  }, []);

 

But unfortunatelly, the height is calculated wrong ( shorter than it should be ), and the ScrollSmoother is flickering ( somewhere about the half of the page, it jumps to the top of the page ).

I've also tried to initialize and kill ScrollSmoother in Astro lifecycle hooks, in React component, and even in Vue components.

Without view transitions, everything works as expected.

 

Thanks for answer.

Link to comment
Share on other sites
GSAP Helper test

GSAP Helper

Posted
Posted

Without a minimal demo, it's very difficult to troubleshoot. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi,

 

I don't have any experience with Astro, but you should look into the routing resources and hooks you have in order to create/destroy the ScrollSmoother instance on route changes as shown in this demo:

https://stackblitz.com/edit/stackblitz-starters-9xvpi2?file=src%2Frouter%2Findex.js

 

As you can see there we're using the useGSAP hook which is specific for React components. Most likely you are rendering a different component on each Astro page so I would use that particular approach on every single one in order to create the ScrollSmoother instance when the component is rendered and remove it before is unmounted using the useGSAP hook.

 

Finally keep in mind that when you don't pass a content element or selector to the ScrollSmoother config object, ScrollSmoother will look for the default structure in the DOM: 

<div id="smooth-wrapper">
  <div id="smooth-content">
    <!--- ALL YOUR CONTENT HERE --->
  </div>
</div>

Ideally the wrapper has to be a direct child of the body element, if that is not possible then you have to define the content directly:

https://gsap.com/docs/v3/Plugins/ScrollSmoother/#config-object

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites
PsychoBunny test

PsychoBunny

Posted
  • Author
Posted

Hey Rodrigo, 

thanks for quick answer! 
Yeah, this is also my first time trying out astro, but i really liked its performance and a new view transitions feature.

I know, i tried to use useGSAP hook also, but i guess it should work even in useEffect. I dont think the problem here is React.

I created a minimal demo, just with astro components, without react.

You can see, that after first render of the app, scrollSmoother is working well.
after transition to another page, scroll smoother breaks ( you can check that there are no inline styles in body ).

 

When you instantiate ScrollSmoother outside of the lifecycle function, after transition use is able to scroll, but without scrollSmoother effect.

 

Link to demo: https://stackblitz.com/edit/github-2hpcon-axifnq?file=src%2Fcomponents%2FLayout.astro,src%2Fpages%2Fabout.astro,src%2Fpages%2Findex.astro,package.json

Thanks for your time!

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi,

 

Upon looking into your demo the problem here are the page transitions applied by ViewTransitions. Astro is doing something that is clearly interfering with the way this works.

 

If you remove ViewTransitions everything works as expected:

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

 

While I understand the appeal of having those nice page transitions, is not working in this particular case. Unfortunately I don't have time right now to start digging into what exactly is happening here, but I'll keep this thread in my inbox so I'll get to that as soon as I have the time.

 

From what I can see in astro's docs you're using the right hook astro:page-load for this but is clearly not working.

 

Sorry I can't be of more assistance but this is something Astro is doing rather than a specific GSAP related issue.

 

Happy Tweening!

Link to comment
Share on other sites
  • 1 month later...
NickWoodward test

NickWoodward

Posted
Posted
On 3/4/2024 at 6:19 PM, PsychoBunny said:

Hey Rodrigo, 

thanks for quick answer! 
Yeah, this is also my first time trying out astro, but i really liked its performance and a new view transitions feature.

I know, i tried to use useGSAP hook also, but i guess it should work even in useEffect. I dont think the problem here is React.

I created a minimal demo, just with astro components, without react.

You can see, that after first render of the app, scrollSmoother is working well.
after transition to another page, scroll smoother breaks ( you can check that there are no inline styles in body ).

 

When you instantiate ScrollSmoother outside of the lifecycle function, after transition use is able to scroll, but without scrollSmoother effect.

 

Link to demo: https://stackblitz.com/edit/github-2hpcon-axifnq?file=src%2Fcomponents%2FLayout.astro,src%2Fpages%2Fabout.astro,src%2Fpages%2Findex.astro,package.json

Thanks for your time!

Hey @PsychoBunny, did you ever get anywhere on this? Keen to implement smooth scrolling *and* view transitions

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...