hakkie.ai

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

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. https://codepen.io/ceoamaterasu/pen/OJxbQew 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

I can say that you getting pretty much what I am want to do! The intent is to make the https://codepen.io/ceoamaterasu/pen/GREorLG 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! https://codepen.io/ceoamaterasu/pen/vYZKBRw

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! https://codepen.io/ceoamaterasu/pen/gORrPqy

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? https://codepen.io/ceoamaterasu/pen/WNOwvLE

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!

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!