ViVO Digital

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

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

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

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.

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.

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

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

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.