daniel-bogart

Has anyone found a decent solution to using ScrollTrigger on a page with heavily lazy loaded content? One issue that I've had is that, while ScrollTrigger is amazing at waiting for the DOM to load before setting positions, it's unable to account for lazy-loaded content which hasn't been loaded on the DOM, or shifts in some form or another. I was able to solve my problem of the ScrollTrigger positions being off by removing lazy-loading, but ideally I'd love to have both. I suppose it would somehow require a way to ScrollTrigger.refresh() only once all of the lazy-loaded content has been loaded up until the ScrollTrigger start. Has anyone found a good solution to this dilema? Thank you in advance for your input

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.

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} />

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, });