[Can't reach bottom of page footer after adding ScrollSmoother]

On 2/10/2023 at 1:46 PM, GreenSock said:

It looks like you set a margin-top on the first child of the #smooth-content container, so it's throwing everything off and pushing the top of the container down.

 

Hi Jack,

 

Yep, swapping out hero section margin-block for padding-block (in the real project) fixed it right up, thanks a bunch!

 

Chris - ViVO

[Can't reach bottom of page footer after adding ScrollSmoother]

Hi all!

 

I notice I'm unable to scroll to the bottom of pages wrapped in ScrollSmoother. A #smooth-content container wraps everything except a fixed header and custom cursor. I've modified one of my existing pens to demonstrate this. Please help me understand what I've done wrong.

 

Appreciate you!

 

Edit - Pen didn't save, BRB!

Edit - Okay, pen has been updated. Note that the footer contains text at the bottom.

 

Chris - ViVO

See the Pen BaPVoWj by chrisandrew_dev (@chrisandrew_dev) on CodePen

[React + ScrollSmoother: Nested ScrollTrigger tweens stop firing]

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

[Netlify build fails with ScrollToPlugin]

Got it thanks. Yes, `document` was indeed undefined here (on first render) as you originally suggested so I moved the `gsap.registerPlugin(ScrollTrigger);` into a useLayoutEffect where we know the document exists. Thank you for help and quick responses. 

[Netlify build fails with ScrollToPlugin]

Thanks Jack, the component we are using is in a client component but at the root level it gets called in from a server component. Shopify Hydrogen to be specific, it has a `isBrowser` flag similiar to the `process.client` example shown in the GSAP docs. I have wrapped the `registerPlugin` inside `isBrowser` but still no dice. 

[React + ScrollSmoother: Nested ScrollTrigger tweens stop firing]

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? 🙏

[Netlify build fails with ScrollToPlugin]

On 11/22/2022 at 3:32 PM, GreenSock said:

My guess is that "document" is not defined yet when you are registering the plugin (like SSR?). Can you move that gsap.registerPlugin() call to a place in your code where you know for sure that the document exists? 

 

Thanks for stepping in to help out once again, Jack (you helped me before we created our org account)! We'll look into this asap and post the outcome here.

 

Chris

[Netlify build fails with ScrollToPlugin]

Hi,

 

We're encountering build errors after adding ScrollToPlugin to a project deployed on Netlify:

Could not load edge function at '/opt/build/repo/.netlify/edge-functions/handler/index.js'
ReferenceError: document is not defined

ScrollToPlugin is imported as follows:

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin';

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

ScrollToPlugin works as expected during local development. Furthermore, ScrollTrigger and SplitText are used elsewhere in the project and build without issue. I'm hoping somebody's able to point us in the right direction.

 

Thanks in advance.