[Make ScrollTrigger under the fold start earlier on full height sections]

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

[Make ScrollTrigger under the fold start earlier on full height sections]

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

[ScrollTrigger + ScrambleText wheel control]

I can say that you getting pretty much what I am want to do! The intent is to make the 

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

 work on the same way as the animations() did, but need also to chain two more animations, the fadeMap() and h2Map(), just like an 1:1 from the example.

We got the result we wanted (scroll and finish animation) but to order another animation as the very start of example seems to be much harder with the current code logic, check my edits!

 

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

[ScrollTrigger + ScrambleText wheel control]

Got it, I will be more careful to not do this mistake!

One more thing: I want to chain the color change animation (named fade on the Codepen) after all the animation spans, but seems both fire simultaneously even though I use the "<" on the end of the tween, and from there I think I have every thing in hands!

 

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

[ScrollTrigger + ScrambleText wheel control]

Thanks Cassie, I have used the current solutions presented and now I have two more challenges on the solution regards timeline / end of animation:

• I am trying to order the animations and seems pretty hard, everything tries to go at one in a single scroll instead of finishing the timeline and the moving to the next (animSpam should finish so animFade starts. When one span have already animFade, animH2 should trigger and the next animFade to the second span should start and so on)
• When I scroll very fast to the end of it, the last animation still plays and the pin releases the section. Is there a way to finish the animation before the pin is released?

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

[ScrollTrigger + ScrambleText wheel control]

Nice, that is great start! I like the solution on the onEnter/back!

 

I need also is to chain two more animations like on my example (this might be the thing that is most difficult also for me): one is to change the color of the span (only after the scramble end) and the h2 settling on top a bit together with the color span change (but not while the span is being scrambled), all that while it is being pinned and I think this solution might only work while using one timeline of animations?

• needs to be pinned
• on wheel: if finishes faster / on fast wheel: finishes and goes to next animation
  • scramble text
  • change color
  • settle the h2

Hope I was clear!

[ScrollTrigger + ScrambleText wheel control]

Hello, I would like some advice on my current issue, here is my requirements for my issue:

• the #section2 needs to be ScrollTriggered
• each animation from span/h2, each scramble needs to be finished on scroll, not stopping while there is scrambled text (sometimes you scroll a bit and it stops on some scrambled text)
• each span/h2 needs also to be ScrollTriggered, so each animation needs to be finished (forcibly?) before it trigger the following span/h2 on the following staggered element (1st span animate, stops. Scroll wheel, 2nd span animate. Quick scroll wheel, following animation quickly animates)
• It also needs to be pinned until the whole timeline is finished.

Hope you guys can help me with this issue, thank you very much!

See the Pen GREorLG?editors=1010 by ceoamaterasu (@ceoamaterasu) on CodePen