React + ScrollSmoother: Nested ScrollTrigger tweens stop firing

[ViVO Digital]

Due to the complexity of the project in it's current state, I have not created a demo but I will if need be. For now, I'm hoping you can point us in the right direction based on the information below.

 

ScrollSmoother is setup in <Page/>:

const Page = ({ children, ...props }) => {
  const el = useRef(null);

  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      const smoother = ScrollSmoother.create({
        wrapper: el.current,
        content: '#smooth-content',
        ...
      });
    }, el);
    
    return () => ctx.revert();
  }, []);
  
  return (
    <div ref={el}>
      <div id="smooth-content">
        ...

 

The (simplified) component structure looks something like this:

<Routes>
  <Page>
    <Home>
      <IAlwaysTween />
      <GsapEffect vars={{ autoAlpha: 0, y: 60 }} triggerVars={{ duration: 1.5 }}>
        <IDontNormallyTween/>
      </GsapEffect>
    </Home>
  </Page>
</Routes>

 

<Home> contains route-specific effects setup in its useLayoutEffect(). No known issues.

<IAlwaysTween> contains component-specific effects setup in its useLayoutEffect() that cease firing after ScrollSmoother is added to <Page>.

<GsapEffect> sets up one-off effects in its useLayoutEffect() that cease firing after ScrollSmoother is added to <Page>.

 

Without ScrollSmoother, all ScrollTrigger-based effects behave as expected. After, the inspector confirms no transforms are applied to children of <Home> that contain pre-baked tweens or are wrapped <GsapEffect>.

 

Any ideas? 🙏

[Rodrigo]

Hi,

 

Is not easy to debug a live site or an issue without an minimal demo. First make sure to be using GSAP Context.

 

Based on your description the main culprit could be the rendering order in React apps. React renders the child components and the works it's way up until it reaches the outmost component. In this case your deepest nested components are rendered first and finally the one that creates the ScrollSmoother instance, my guess is that this is causing the issue. I can think of two alternatives involving basically the same setup. Create a React context that wraps everything and once the ScrollSmoother instance is created in the main component update a property in the context and then in the child components with the ScrollTrigger instances you can do one of two things: One, refresh your ScrollTrigger instances; Two, create your ScrollTrigger instances. For both cases you'l need a useLayoutEffect that has that particular property from the context as it's only dependency.

 

Sorry I can't be of more assistance right now, but is late to create a live example that illustrates all that I explained above. Tomorrow I'll jump into creating one, since this will be something other users could run into.

 

Happy Tweening!

[ViVO Digital]

Hi @Rodrigo,

 

Many thanks for your guidance on this. If you do find the time to pen a short example of the optimal structure you're suggesting, that'd be extremely helpful. I'll update you if we have success in the meantime. 

 

Regards,

 

Chris