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