Using scrollTrigger in other components stops working only in production

[dantheman]

I'm using a combination of smooth-scrollbar, nuxt, gsap, and scrollTrigger.

 

I have some elements hooked up to move with the scrollbar. Everything works fine locally, but doesn't work when deployed with vercel.

 

Here is a demo on vercel https://gsap-test-steel.vercel.app/. The text should move as you scroll. The smooth scrolling is working but the text doesn't move.

 

The issue seems to come when using gsap in components other than the one where the scroll proxy was defined.

 

Here is where I setup the scroll proxy in pages/index.js:

mounted() {

    const options = {
      damping: 0.05
    }

    const scroll = Scrollbar.init(document.querySelector('#scroll-wrapper'), options)

    scroll.addListener((status) => {
      ScrollTrigger.update()
    });

    ScrollTrigger.scrollerProxy("#scroll-wrapper", {
      scrollTop(value) {
        return scroll.offset.y; // getter
      },
      getBoundingClientRect() {
        return {
          top: 0,
          left: 0,
          width: window.innerWidth,
          height: window.innerHeight
        };
      }
    });

  },

 

Then in a separate component (which is then imported into index.js):

  mounted() {

    gsap.fromTo(
        this.$refs.text,
        {
          x: '-50%'
        },
        {
          x: '100%',
          scrollTrigger: {
            scroller: "#scroll-wrapper",
            trigger: this.$refs.text,
            scrub: 0.1
          }
        })
  }

 

If this code and relevant html is moved into index.js then the text moves both locally and on vercel, but when it is in another component like this it stops working when deployed.

 

I've tried to make a minimal reproduction on codesandbox but simply adding core-js as a dependency on a fresh nuxt project causes errors. Here is the repo for this demo https://github.com/danchristofi/gsap-test

 

[GreenSock]

Welcome to the forums, @dantheman. Sorry to hear about the trouble. That certainly sounds like an issue with Vercel, your bundler, or smooth-scrollbar. We just don't have the resources to support 3rd party tools like that (I'm not familiar with any of them, sorry). The biggest tell is that it works fine locally but then when you deploy it breaks - that tells me it's very likely your bundler or build process or something along those lines. Perhaps you could contact the author of those other tools you're using. 

 

Another thing I'd try just for troubleshooting: eliminate smooth-scrollbar completely and see if things work. 

 

Oh, and one other little tip: it's generally best to use xPercent: -50 instead of x: "-50%", for example, because GSAP actually lets you layer regular x/y values on top of xPercent/yPercent values for really useful effects. 

 

Good luck!

[omarel]

Having the same exact problem. I thought this was so nuanced I wouldn't find search results. It's being tested in a Next Js app. When deployed to Vercel everything works except ScrollTrigger. I'm not sure where the issues are, but new platforms like Vercel, Next JS, netlify, DO are taking over and most developers are using them now. The issue isn't just on Vercel. I tried deploying on Digital Ocean as well and the same. It loads sometimes, and sometimes not. I refresh to test and it's an intermittent issue.

 

I love GSAP and am a paid user and wanted to really carry it over to our new codebase: React with Next JS framework but at this point we may have to test Framer Motion instead.

[OSUblake]

How do you know your issue is the same as the original post? The original post doesn't sound like anything related to any platform. More like they are creating the smooth scroller in the incorrect order. Child components are mounted before the parent, but the smooth scroller needs to be created before the child ones.

[GreenSock]

Indeed. I'm super curious if you remove smooth-scrollbar from the equation if things work. Any chance you could provide a minimal demo? 

 

And thanks for being a Club GreenSock member! 🙌

[omarel]

10 hours ago, GreenSock said:

Indeed. I'm super curious if you remove smooth-scrollbar from the equation if things work. Any chance you could provide a minimal demo? 

And thanks for being a Club GreenSock member! 🙌

 

Yes. I'm going based on the title of the thread only. We aren't using smooth scrollbar. I made a demo on Vercel and a public repo.

 

This demo uses GSAP on the hero and then GSAP with ScrollTrigger below the fold to fade in sections.

 

When you visit the url and scroll down images simply fade in. Locally ScrollTrigger works no matter how many times I refresh. When deployed in production, if you hit refresh multiple times you will see the components with ScrollTrigger no longer load. It's intermittent. but hitting refresh a few times demos the issue. (The hero animation that doesn't use ScrollTrigger works all the time locally and in production.)

 

Live Demo on Vercel:

https://gsapscrolltriggernextjs.vercel.app

(must refresh the browse a few times to see ScrollTrigger stop working. Locally no problems)

 

Public Repo:

https://bitbucket.org/omarel/gsapscrolltriggernextjs/src/main/

 

These are the 2 components below the fold that have ScrollTrigger:

https://bitbucket.org/omarel/gsapscrolltriggernextjs/src/main/components/homepage/Boxsection.js

https://bitbucket.org/omarel/gsapscrolltriggernextjs/src/main/components/homepage/Fullsection.js

 

We're moving our codebase to NextJs and really want to carry over GSAP but we've been testing to make sure we dont run into issues in production.

[OSUblake]

Hi omarel,

 

I've clicked refresh well over 100 times, and it's looks the same every time.

 

It's really hard to troubleshoot a live site. I would first rule out ScrollTrigger. There's a bunch of stuff that has to happen in a next.js app before GSAP even get's called. I would remove all your ScrollTrigger code to see if the problem persists.

 

If there's no issue when you remove your ScrollTrigger code, then start making debugging easier. console.log your animations out and add markers to your triggers. And maybe add ScrollTrigger to the window so you can call from the dev console.

 

window.ScrollTrigger = ScrollTrigger;

 

Additionally, I would use useLayoutEffect for anything that is ScrollTrigger related, and even for stuff when you might use .set(), .from(), or .fromTo().

 

I would also register GSAP plugins inside a useLayoutEffect.

 

[GreenSock]

Yep, there should be absolutely no reason that you can't use GSAP with Next.js (or anything that can handle JavaScript). It's almost surely some issue with the way Next does its startup routines or lifecycle stuff.

 

Keep in mind that when you gsap.registerPlugin(ScrollTrigger), that's gonna need the window and body to exist which is why Blake recommended putting that inside your useLayoutEffect() or useEffect(). The way you've got it now (at the very root level) may be an issue if <body> does exist at that point, for example. That happens with SSR apps. 

[omarel]

If you refresh on safari I think it’s more apparent than chrome. Seems to hold in chrome more easily. 
 

I really made this sample only to test our common GSAP and ScrollTrigger implementations we want to carry over. This isn’t a live site with much of anything else albeit it looks that way. I’ve tested removing scrolltrigger and the lower sections show up certainly.  
 

it’s a demo only for our common GSAP implementations. 

 

but I will test those couple of points you guys mentioned above about the body being called and the placement of the gsap registerplugins. As far as I can tell it is currently following whatever is in the react instructions. 
 

Im hoping to find some clear consistency on load so we can carry gsap over. 
 

React and NextJS are making significant headway these days in front end more than ever before and I’d love to be able to rely on gsap for animations over poking around for other libraries. 

[OSUblake]

I see it happening on Safari, but I'm still not convinced it's a ScrollTrigger issue. GSAP doesn't run inside React, it's imperative code that runs inside an effect, so as long as everything in the DOM is correct when create you create an animation/ScrollTrigger, it should just work. 

 

But next.js is a complicated framework, so it's hard to tell what might be happening on a live site. I'm wondering if it might be trying to recycle some of the DOM elements. I would try using fromTo instead of from just to see. And make sure to always put your scrollTrigger object inside the timeline, and kill your ScrollTrigger and any other animations on unmount.

 

useLayoutEffect(() => {
  
  let tl = gsap.timeline({
    scrollTrigger: {
          trigger: boxSection.current,
          start: "top bottom", 
          end: "+=500",
          scrub: 0.4,
      } 
  });
  
  tl.fromTo(boxSection.current, {
    opacity: 0,
    y: 0
  }, {
    opacity: 1,
    y: 1
  })
  
  return () => {
    tl.scrollTrigger.kill();
  }
},[]);

 

And for good measure, try calling ScrollTrigger.refresh() on the index home page inside an effect.

 

[omarel]

YESSSS!! ScrollTrigger seems consistent in production now! I refreshed a million times on safari and on iPhone. I've tested variations of what was mentioned above but one change resolved it. 

 

It was switching From to FromTo. (That was it. I did implement some of the others anyway)

 

Maybe this needs some looking into. Perhaps in production it just doesn't know how to hydrate the starting scroll animation consistently when using From. Locally constant refreshes had no problem, but From breaks on a few refreshes on Vercel and Digital Ocean Apps hosting. 

 

I tested some points mentioned in the thread, and will leave some notes for others who may be using NextJS:

 

• Change From to FromTo (Used. Worked with no other additions! But did require some minor refactoring )
• Destroy ScrollTrigger on unmount (Used!)
• Move register Gsap Plugins into useEffect (Tried but no impact)
• Try useLayoutEffect instead of useEffect. (NextJs doesn't allow it)
• Add ScrollTrigger refresh in useEffect on index page (Quirky as it stopped the scrolltrigger animations on quick reloads)

Thank you!! I will keep testing a few other implementations. I'm sure I will run into a few more things, but I think this is pretty safe now!

[GreenSock]

Yay! Sorry, I didn't even think of how you may have stumbled on that [known] regression in 3.9.1 that affected .from() tweens with ScrollTriggers in a certain scenario. Maybe your local environment had an older version. It has already been fixed in the next release. I believe you can also fix it by setting lazy: false on the tween (that won't be necessary in any version except 3.9.1 due to that regression). My apologies.

 

Glad you got it all working! Thanks for letting us know. 🙌

[omarel]

Thank you! Just want to make sure I understand. So .from has an issue with 3.9.1? If so, when will 3.10 come out. I wonder how it worked locally, but not on Vercel. Because you think I had an older gsap version which doesn't have the issue with .from and vercel is initializing 3.9.1?

 

Also wondering how I can check my local npm gsap version. I'm pretty sure it is the latest 3.9.1 as I followed the Module Installation Token installation from the dashboard, but maybe it had something from prior. I just want to be sure and run some tests.

[GreenSock]

5 hours ago, omarel said:

So .from has an issue with 3.9.1?

Yep, but you'd only notice in a few rare situations and it is typically resolved by setting lazy: false on the tween. 

 

5 hours ago, omarel said:

If so, when will 3.10 come out.

We cannot say for sure, but hopefully by mid-March. We're hard at work on several exciting things

 

5 hours ago, omarel said:

Also wondering how I can check my local npm gsap version.

You can check the files or the package.json or just console.log(gsap.version) in the browser.