Moti

Hi Cassie, Thanks for the link; I'll check that channel out. Now I understand It seems that way. How GreenSock Jack and you explained it now makes sense to me. Thank you both for your time and knowledge It helped a lot. I was already considering to choose between the two components i've created and now I could keep them both. together with got it working Working sandbox: https://codesandbox.io/s/gsap-reactthreefiber-canvas-working-trq85d Again thank you both for time, effort and support. Cheers! -Moti

Hello GreenSock, Thank you for your response. I was tinkering with the sandbox trying to implement the Scrolltrigger.refresh(), unfortunately I did not get it to work (think i have coded it wrong). I have both tried to call the inside the useEffect and tried to set up a timer; both did not have the desired results. Sandbox: https://codesandbox.io/s/react-canvas-forked-72nxi0?file=/src/index.tsx as for your reply 1. Confused on how this works, I think I have created the scrollTriggers in order. Content1 for the 'firstContainer' then Content2 for the 'secondContainer'. I have also created a third one just to test out the scrollTrigger logic and it behaves as expected. The start pin on Content2 waits for the pinSpacer and all is well. However that is not the case for Content1. ( it does have the pinSpacer upon inspecting but it Content2's scrolltrigger just doesnt see it. ) 2. I have tried to implement Scrolltrigger.refresh() but I did not manage to make it work ( maybe because I had it wrong) Regards, Moti

Greetings gsap community, I have recently found gsap scrolltrigger plugin and have been hooked ever since. Before I start with my question/s, I would like to thank the people who created gsap and to those who help out in this forum. I am pretty much new to the plugins and to the framework that I am working on so I will try my best to explain the issue I have created a small threejs animation together with html animations like (fake horizontal scroll) found in scroll trigger demos. What i discovered is that the start pin of the other animations is not located properly after the Canvas for the Three model. see (secondContainer) in the demo. Issue: other animation start pin is not in desired location. Minimal Demo: https://codesandbox.io/s/react-canvas-p07dz3?file=/src/index.tsx Note: 1. Actually using Nextjs (have not been able to make the pen/sandbox work) i stole this demo sandbox from topic(see below) 2. I have read about pinSpacing/ pinSpacer but i have no luck on making it work due to my inexperience Any suggestions/answers are greatly appreciated. Also if this was already answered please point me to the right direction. Regards, Moti