tramedigitali

@GreenSock you are indeed right! Gatsby's StaticImage component actually lazy load under the hood all images rendered using it, so it might impede those refresh() calls. This is actually a problem nowadays as many frontend frameworks (NextJS with next/image and Gatsby as well) lazy load images if using their image component. Maybe a disclaimer in ScrollSmoother docs advising user on either setting width/height or watching for load event could be useful?

A quick update: it looks like @Saim Abbas was right! If some image (atm we can't say for sure if all elements or only a part of them) don't have a fixed height set scrollSmoother isn't able to figure out the correct height of our page! So setting height to images seems to be required to let scrollsmoother work correctly.

First time posting here so forgive me if I'm doing something wrong! We're experiencing the exact same issue and we made the exact same measurement of @JoeH with basically the same results: Nop Yup, it gets the correct height: 11112 (when scroolsmoother is in action it's missing about 2000px: 9779) Yup Setting normalizeScroll either true or false doesn't change the end result, same with ignoreMobileResize. Unfortunately setting smoothTouch to 0.1 or less isn't working for us. This is how we create our ScrollSmoother instance: useEffect(() => { const smoothOperator = ScrollSmoother.create({ smooth: 4, effects: true, wrapper: '#___gatsby', smoothTouch: 0.1, }); smoothOperator.refresh(); // we tried both refreshing as soon as it mount the page and not refreshing at all console.debug('Starting ScrollSmoother'); return () => { console.debug('Killing ScrollSmoother'); smoothOperator.kill(); }; }, []); We're working on a reprod on codepen but i'm still not able to replicate this behaviour.