emily.conklin

Hey guys, I have recreated the issue in a sandbox and it works as expected / I initially built a dummy layout in a fairly bare bones repo and it works as this sandbox does; the problem is when I tried to recreate the same effect in my company website. The banner component is loading after the second screen image and the triggers are stuck where the second image initially loads... I have no idea to try and recreate the problem. https://codesandbox.io/s/great-resonance-5sncv?file=/src/components/hero.js (my apologies the logic is in index.js)

Hey thanks for the reply, unfortunately it didn't work. I tried it inside a useEffect hook and outside of one it totally kills the animation in both instances (no start/end scrollers, triggers or movement).

Hey guys, I am a n00b and I think I have determined the problem however I don't know how to fix it (I was not able to reproduce this problem in my sandbox environment) - maybe someone here can help! So on the initial page load the triggers for the second screen are in the wrong position, which I am assuming is because the second screen is loading before the banner component. It is fine when I resize the page / they move to the top and bottom of the second screen where they're supposed to be (I am assuming because both the banner component and image have already been cached). How do I fix this? This is my code snippet useEffect(() => { // MOVE THE COMPUTER SCREEN OVER const tl = gsap.timeline({ scrollTrigger: { trigger: animComputer.current, start: 'top top', // end: 'bottom bottom', endTrigger: '#chart-wrapper', scrub: true, markers: true, id: "move-across", } }); tl.to("#chart-wrapper", {xPercent: 50}) });