Pause a tween.js animation

I want to pause animation. In this code ball moving back and forward on click and i need to make it pause it on click and continue on unpause. This is the code .
Any help?

Um, your fiddle does not seem to work. It would be great if you share a runnable demo.

Since you are using tween.js it’s important to know that it’s only possible to stop() a tween. If you call stop() and then start() again, the restarted tween will animate the property over the entire original duration to the defined target state.

https://jsfiddle.net/10Lryk34/

Thank you for your reply Michael. I am trying the same with this robot model but it fails. When i run the animation and stop rotation animations, movement still proceeding. [this is the file] . Could you please take a look? Thank you in Advance.

That’s because you do not stop the tween animation. Your Robot.animate() function should look like this:

Robot.prototype.animate = function(on)
{
	if (on)
	{
	    this.animator.start();
			var newpos;
			if (this.object3D.position.x < 0)
			{
				newpos = this.object3D.position.x + 6.667;
			}
			else
			{
				newpos = this.object3D.position.x - 6.667;
			}

			this.tween = new TWEEN.Tween(this.object3D.position)
		    .to( {
		        x: newpos
		    }, 3000).start();

	}
	else
	{
		this.animator.stop();
		var newpos;
		if (this.object3D.position.x < 0)
		{
			newpos = this.object3D.position.x + 6.667;
		}
		else
		{
			newpos = this.object3D.position.x - 6.667;
		}

		this.tween.stop(); // FIX

	}
}
1 Like

Thank you so much Michael! To be honest i was doing the same but it wasn’t working for me :slight_smile: . Maybe i was missing something.

Robot.prototype.animate = function(on)
{
	if (on)
	{
	    this.animator.start();
		var newpos;
		if (this.object3D.position.x < 0)
		{
			newpos = this.object3D.position.x + 6.667;
                        newpos = this.object3D.rotation.y = 15.5;
		}
		else
		{
			newpos = this.object3D.position.x - 6.667;
			newpos = this.object3D.rotation.y = -19;
		}

			this.tween = new TWEEN.Tween(this.object3D.position)
		    .to( {
		        x: newpos
		    }, 3000).start();

	}

How to make it not go out of screen? How to force it go back when it goes out of screen? Also i am trying to make animations onClick event but it fails all the time.