pause doesn't work again with onComplete

[sergey.msky]

Hello. By default I use the animation for the 3d scene, it creates a "levitation" for the object. Every time you hover over an object, it should pause, but the pause only occurs immediately after the animation starts. I understand it has to do with onComplete. How to stop animation every time?

See the Pen YzvmwRB by SergeyMsky (@SergeyMsky) on CodePen

[GreenSock]

That's because you only stored a reference to the FIRST tween. The subsequent tweens you're creating onComplete aren't referenced anywhere. 

 

Another problem is that you've got a 'mousemove' listener running on EVERY mouse movement anywhere on the page that's constantly checking the target's node type and calling play() or pause(). That's very inefficient. You might want to consider just adding mouseenter/mouseleave event handlers to the non-<div> elements that pause()/play() only when necessary. 

 

I think you could simplify things quite a bit: 

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

 

That uses a generic object to store a ".tween" property which gets updated every time it re-generates the tween. Thus you've got a consistent reference (the generic object) with a property that gets swapped out only when necessary. 

 

I hope that helps.