Make ScrollTrigger under the fold start earlier on full height sections

[hakkie.ai]

Hello,

I would like help on the following segment, I am having some trouble controlling the animating ScrollTrigger within full height elements.

The goal is, when you scrolling between two sections, having no "empty areas" in-between sections.

Things underneath the fold are invisible and needs to be revealed earlier, but the ScrollTrigger behavior does not let it happen, It sorta requires the next section be fully on top and then it starts rolling the animation on ScrollTrigger

 

This is not the desirable outcome as there is a huge gap until the next animation.

 

Is there a way to start the animation on this point or earlier and pin this next section until the animation is done and not do the current behavior of starting only when is pink area be full on the screen?

 

Edit:

This is the desired outcome, but this does not work with pin and also the animation does not finish when you pass by the pink section.

See the Pen OJxbQew by ceoamaterasu (@ceoamaterasu) on CodePen

 

 

The ideal: As the pink section appears, the animation starts on the middle of the scroll and then it pins once the whole section when it is ono full screen and unpin the section when the animation on ScrollTrigger ends

See the Pen QWqEQeb by ceoamaterasu (@ceoamaterasu) on CodePen

[akapowl]

Hello @hakkie.ai

 

In cases as such, just create one ScrollTrigger that handles the pinning only and let the other one handle the animation.

"Sync" both of them by adjusting their end-values, so they end at the same spot in scroll and you should get a result as you described.

 

Hope that helps.

 

As a sidenote;

when using a numerical scrub, it might still be that the animation will not have finished, when the section becomes unpinned, as the numerical value will cause the animation to 'drag behind' the scroll-position for that set amount of seconds. So if you scroll fast enough, that 'gap' will besome visible.

 

See the Pen PoJbRKV by akapowl (@akapowl) on CodePen

 

[hakkie.ai]

Just. Perfect. I will apply to most of my solutions this you have done! Hopefully it fits all!