Issue integrating with GSAP and Next.js

[rnrh]

Environment

• Browser: All
• Version of smooth-scrollbar: 8.6.2

Issue Summary

I am using Smooth Scrollbar inside a Next.js project with GSAP (animation library). I am unable to get a nested component with an animation inside of it to render before Smooth Scrollbar, which means It is not available on load, only after a hot reload/refresh locally.

Current Behavior

If you go to this CodeSandbox you will see the effect as it is intended. The text should be pinned to the top of the viewport as your scroll with a 100px transform on the x-axis. This only works as I have a setTimeout() around the GSAP animation, though. This is forcing things to load so that Smooth Scrollbar goes first, then the GSAP animation instance.

The setTimeout() thing seems really bad and hacky, but you will see that if you remove it and refresh the page, the effect no works, but if you change the "end" value in the scrollTrigger object inside the animation object, this will trigger a hot reload, which will now render the effect correctly. I believe this works because React is only reloading the component, so the Smooth Scrollbar instance already exists, and now things have happened in the right order

Expected Behavior

Remove the setTimeout(), save and reload, and the effect will no longer work. You will need to trigger a hot reload on the component in order for the effect to be applied.

Steps to Reproduce

1. Go to the navigation.js file, remove the setTimeout(), save, and refresh.
2. [Effect is no longer working] Go into navigation.js and update the 'end' value in the scrollTrigger object to some other number, save, scroll back to page top, scroll down, and see the effect is applied.

Online demo

CodeSandbox

[tdaulbaev]

you will need initialize scrollTrigger animation after scrollbar initialized.

something like:

  React.useEffect(() => {
    if (isScrollInit) {
      initScrollTriggerAnimation();
    }
  }, [isScrollInit])

[sadeghbarati]

Next.js 13

#503 (reply in thread)

• https://beta.nextjs.org/docs/rendering/server-and-client-components#convention
• useEffect only if you use client-side component

'use client';
import gsap from 'gsap'
import ScrollTrigger' from 'gsap/scrolltrigger'

gsap.registerPlugin(ScrollTrigger)

---

Next.js 12

• useEffect + typeof window !== 'undefined'

import gsap from 'gsap'
import ScrollTrigger' from 'gsap/scrolltrigger'

if (typeof window !== 'undefined') {
  // client-side-only code
  gsap.registerPlugin(ScrollTrigger)
}