Damian Balas

@OSUblake thanks, I have fixed it like this: //! ScrollTrigger fix for react - the calculations were off because images resize the container useEffect(() => { ScrollTrigger.refresh(true); //! call it once to be sure everything is calculated const foundImages = document.querySelectorAll('img'); if (!foundImages) return () => null; const interval = setInterval(() => { const areImagesLoaded = Array.from(foundImages).every( (image) => image.complete, ); if (areImagesLoaded) { ScrollTrigger.refresh(); clearInterval(interval); } }, 200); return () => { if (interval) { clearInterval(interval); } }; }, []);

@Cassie I've found out that refresh() is causing rerender of my react components, so the hover animations are blinking ? Is there a way to fix that?

@Cassie Thanks for your suggestion, but it didn't change anything. Could you tell me if the refresh() function can lead to performance issues? Of course we can try some other possible solutions I really appreciate your help even without a demo! I love this forum

@GreenSock Yeah, but the problem is that this are normal <img /> elements and they aren't Lazy loaded. React pages render after the page loads. So with normal JS you can't tell if the DOM is rendered already. That's the functionality of useEffect(). I think I have an edge case and it cannot be resolved without changing the layout. I'd like to know if refresh() in an interval can cause performance issues if there are only 2 scroll triggers on a page? If not I will leave it like that

Hi @Cassie, there is a pretty complicated setup that I'm using. I can't provide you with a demo at the moment Maybe you can just guess some solutions and I will try them out? I'll try to provide you a demo ASAP, but I need to work on the project because of a deadline and I don't want to drop gsap just because of that issue. I really appreciate your help! Thanks for your feedback. I use the gsap functions inside the useEffect hook, so the DOM is 100% rendered. I think that the images are messing with the gsap calculations. Without any images, everything is fine. For a temporary solution, I have made a setInterval that goes every 1s for 10 times. The setInterval function then calls ScrollTrigger.refresh()

Hi, my pinned left section is adding space on bottom. It's only if I start scrolling before the page still loads. I'm using react, so the DOM is rendered before I use GSAP. I think the issue here is that there are <img /> elements that change the height after they are loaded. const animation = gsap.to(container, { ease: 'none', scrollTrigger: { trigger: container, start: 'top top', end: 'bottom bottom', pin: '#sustainability-left-section', pinSpacing: false, invalidateOnRefresh: true, }, }); invalidateOnRefresh didn't help. container is a div with grid columns 50% 50%. I'm pinning the left div which has 100vh set. Any ideas?

Thanks!!!! @OSUblake

@OSUblake yes, I had to change the Layout. Flex was messing with everything. My horizontal scroll is a bit laggy... Are there any options to make the animation crisp? const initializeHorizontalScroll = (): GsapKill => { const container = document.getElementById('horizontal-scroll-wrapper'); const navigation = document.getElementById('main-navigation'); if (!container) { throw new Error('Container cannot be null!'); } const navigationWidth = navigation ? navigation.getBoundingClientRect().width : 0; const xValue = container.scrollWidth - document.documentElement.clientWidth + navigationWidth; if (xValue <= 0) { throw new Error( `Cannot initialize horizontal scroll, because there is nothing to scroll. xValue: ${xValue}`, ); } const animation = gsap.to(container, { x: () => `${-xValue}px`, ease: 'none', scrollTrigger: { trigger: container, invalidateOnRefresh: true, start: 'top top', pin: true, scrub: 0.5, end: () => container.offsetWidth, }, }); return animation.kill; };

Maybe it helps to find a solution: I found out that scroller start and scroller end are in the same spot and it's following while scrolling:

Hi, I need some help with horizontal scrolling. I can't provide you with a CodePen example. My env.: Next.js GSAP (newest version at the moment) My <body> element contains a <Layout> element which is set like this: .layout { display: flex; flex-direction: row; width: 100vw; height: 100vh; overflow-y: auto; main { display: flex; flex-direction: column; flex-grow: 1; overflow-y: auto; overflow-x: hidden; } } Inside <main> I'm trying to implement something simmilar to the codepen https://codepen.io/GreenSock/pen/eYpOZvX My version looks like this: export const HorizontalScrollTiles: React.FC = () => { useEffect(() => { const container = document.querySelector('.abc'); const scroller = document.getElementById('main'); gsap.to(container, { x: () => `${-(container.scrollWidth - document.documentElement.clientWidth)}px`, ease: 'none', scrollTrigger: { scroller, trigger: container, invalidateOnRefresh: true, pin: true, scrub: 1, end: () => `+=${container.offsetWidth}`, }, }); }, []); return ( <div className="abc" style={{ minHeight: '100vh', display: 'flex', flexWrap: 'nowrap', width: '600%', }}> <Tile className="horizontal-scroll-tile" style={{ width: '100%', backgroundColor: '#ff22ff' }} /> <Tile className="horizontal-scroll-tile" style={{ width: '100%', backgroundColor: '#ffff2f' }} /> <Tile className="horizontal-scroll-tile" style={{ width: '100%', backgroundColor: '#f29fff' }} /> <Tile className="horizontal-scroll-tile" style={{ width: '100%', backgroundColor: '#ff8029' }} /> <Tile className="horizontal-scroll-tile" style={{ width: '100%', backgroundColor: '#ffff99' }} /> <Tile className="horizontal-scroll-tile" style={{ width: '100%', backgroundColor: '#11ffff' }} /> </div> ); }; Tile Element is just a <div> containing another <div> with a <h2> I'm going to explain the problem now: First of all, the code does something only if I set markers: true it's not perfect, but at least I can scroll almost to the end of the last <Tile> Without markers set to true, I can't scroll at all. Do you have any ideas/suggestions how to implement this functionality? It's really important. With markers set to true: and without: