ScrollTrigger not starting ending on selected element / pushing down content

[daniel-bogart]

Hello. I am working on a React.js project and essentially trying to recreate the codepen link I added (someone else's work). It's on a pretty long homepage at the very bottom above the footer. For whatever reason, not only are the start/end markers (for the pinned/selected section) way above where the element should be, causing an overlap, but a huge amount of white space was created between the selected section to be pinned and the section above it. So the "end" appears to be where the "start" marker should be and the start marker is about the height of the selected section (containerRef) above that. 

 

I've tried ScrollTrigger.refresh() in my useEffect (for component did mount). But it still loads way above where it should be. Below is the ScrollTrigger I created. Apologies that I was unable to recreate the issue in CodePen. Any ideas as to what may be causing this behavior? I've watched so many tutorials and been through so many threads, but I have been unable to find a solution. My ScrollTrigger, of course, is also in a useEffect[]

 

ScrollTrigger.create({

trigger: containerRef.current,

pin: true,

start: 'top top',

end: '+=500',

scrub: 1,

markers: true,

});

See the Pen 4a8ca13036ba9f2f80919f671da1fed0 by akapowl (@akapowl) on CodePen

[Cassie]

Hey there!

 

Here's a React template, can you recreate it in here? It's usually just that *some content* somewhere is being loaded in or shifter and you need to call refresh after that's happened. (It might not be in your component with the scrollTrigger in, it could be elsewhere in your codebase)

https://codesandbox.io/s/je6ln

[daniel-bogart]

That actually makes a lot of sense as I am abstracting that ScrollTrigger section to its own component then calling it on the larger page. Would you have any ideas of the best ways to make sure the parent component has all of its content loaded before loading the child component (my section with the ScrollTrigger).

Currently I'm passing parentContentLoaded in as props from the parent component. Then in the useEffect of the ScrollTriggerSection, I'm only creating a ScrollTrigger when parentContentLoaded is true, but it's still acting kind of whack. 

I know it should be loaded in the useEffect anyway, but I'm trying anything at this point. I suppose it may be more of a react question at this point. 

 

 

 

 

const [pageContentLoaded, setPageContentLoaded] = useState(false);

useEffect(() => {

if (document.readyState === 'complete') {

setPageContentLoaded(true);

}

}, []);

 

<ScrollTriggerSection parentContentLoaded={pageContentLoaded} />

[daniel-bogart]

I found the issue! So the ScrollTrigger shouldn't have to be told when to load. GSAP is amazing and ScrollTrigger calls ScrollTrigger.refresh after the DOM is loaded. But what it cannot account for is LazyLoaded content. You must either call ScrollTrigger.refresh somehow after all of the LazyLoaded content is loaded, or you just should not be using lazy loading on that page. In my case, it was a bunch of images. This was driving me absolutely nuts and I'm very happy I got it sorted. 

[Cassie]

Hooray! Glad you found it!