[gsap/react + threeFiber/drei; start pin location issue]

Hi Cassie,

 

Thanks for the link; I'll check that channel out.

 

Now I understand

 

2 hours ago, Cassie said:

But, you're using React and there's a bunch of stuff happening behind the scenes (That I can't explain or advise on) For whatever reason your second scrollTriggered component is rendering to the DOM before the first so when it calculates all the positions, it's incorrect because the first component doesn't exist yet.

It seems that way.

 

How GreenSock Jack and you explained it now makes sense to me. Thank you both for your time and knowledge

 

2 hours ago, Cassie said:

Hope this helped a little!

It helped a lot. I was already considering to choose between the two components i've created and now I could keep them both.

 

9 hours ago, GreenSock said:

set refreshPriority values to reflect things properly

together with

9 hours ago, GreenSock said:

The entire point here is to just make sure you call ScrollTrigger.refresh() when EVERYTHING is done rendering and the page is in its final state. 

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

[gsap/react + threeFiber/drei; start pin location issue]

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

 

[gsap/react + threeFiber/drei; start pin location issue]

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

See the Pen index.tsx by s (@s) on CodePen