onComplete timeline callback function trigger animation very late

[Sandy Choudhary]

Hello Guys,

Hope you are doing good,

i need some help as iam stuck in onComplete callback function its trigger fine when i scroll slow and perform the action but when i scroll faster then it skip the animation or trigger very late.

E.g.. in given code pen  example when progress bar width is 100% then section should switch immediate with some css property. its working fine when i scroll very slow. failed in case when i scroll very fast.

 Thanks a lot for your help !   

See the Pen NWVgQEa by Sandy-Choudhary (@Sandy-Choudhary) on CodePen.

[mvaneijgen]

First of, I would let GSAP handle all animations and not toggle classes. Next I would never use transition: all; in your CSS change all for the specific properties you want to target and you should never transition something that you're animating with GSAP:

Quote

You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. 

There are some properties you're better off not animating, and width is one of them, this causes a browser repaint which is almost never good for perforce, instead use the transform properties and animate scaleX instead of width. 

 

Lastly you've got a scroll trigger that has scrub: 1.5, which results in animation always lagging behind 1.5 seconds, so if you don't want this lag set it to true.

 

I'm not completely sure what it is your animation is doing. I can see some bars, but nothing is happening with those transparent bars. If each section is depending on the previous section, why not build one timeline animation with one ScrollTrigger instead of a forEach and creating multiple ScrollTriggers. Hope it helps and happy tweening! 

 

[Sandy Choudhary]

@mvaneijgen  
Thanks for the advice got your point will change the transition which are executing from css end will move to gsap end  and late complete  issue is as you described scrub one changed it to true and its trigger immediate as expected.

Thank you very much for your guidance.