how to stop a timeline animation for a specific object using gsap timeline (gsap.to)

[one77]

Good day everyone, 

please you all should bear with me on this one, am still a gsap newbie.

i have multiple animations going on some simultaneously on my onboarding page, but i noticed it places alot of load on my pc.

currently i stop some objects from animting by setting their opacity to zero which i think doesnt stop the animation in the background.

so please how do i stop an aniamtion especially when its done.

See the Pen KKQqGgW by Eraloop (@Eraloop) on CodePen

[GreenSock]

That's correct - setting opacity to 0 on an element won't suddenly stop all of its animations.

 

The simplest way to stop all the animations for those particular elements would probably be: 

gsap.killTweensOf(".box");

Or you can save each tween (as variables or in an Array) and call .kill() on each one individually. 

 

I think you could simplify things a bit, like this (click to kill): 

See the Pen mdXwzGe?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Have fun!

[one77]

@GreenSock Thanks somuch