Open rnrh opened 3 years ago
you will need initialize scrollTrigger animation after scrollbar initialized.
something like:
React.useEffect(() => {
if (isScrollInit) {
initScrollTriggerAnimation();
}
}, [isScrollInit])
Next.js 13
https://github.com/idiotWu/smooth-scrollbar/discussions/503#discussioncomment-4026655
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)
}
Environment
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
Online demo
CodeSandbox