Pin container div in tl during internal scrollTrigger animations

[brennamacquarrie]

Hi! 

I want to achieve the effect that the purple circle scrolls all the way into view before the black div appears. I thought that pinning the container would achieve this, but the whole screen is continuing to scroll during the .from animation

 

I was referencing this excellent example but could not recreate. Do I need to make this container like 200vh to allow "scroll time" for the circle's animation to complete? Seems there must be a better way 🤔 TIA!

 

See the Pen KKxRPRR?editors=0111 by BMacQuarrie (@BMacQuarrie) on CodePen

[mvaneijgen]

Shouldn't you put all the GSAP logic in the context? I don't use React, but that does seem to work.

 

Maybe useful for reference 

 

 

See the Pen gOdzPME?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[brennamacquarrie]

hey mvaneijgen - thanks for taking a look!

I had seen it done both ways (tl in context and tl above context) and wasn't sure what was best practices - thank you for pointing that out! i also noticed i could be storing my tl in a ref.

 

I think what I was mostly missing (missing the concept with my brain) was setting the bottom of the animation to "farther" away, instead of "bottom top". I'm using 2000px and it's working much closer to how I imagined