BREAKING: no longer auto-start tweens by default when calling tween.update(). To restore previous behavior for the whole app, set the static Tween.autoStartOnUpdate to true.

Author: trusktr

dist/tween.amd.js

@@ -601,7 +601,7 @@ define(['exports'], (function (exports) { 'use strict';
         };
         Tween.prototype.end = function () {
             this._goToEnd = true;
-            this.update(Infinity);
+            this.update(this._startTime + this._duration);
             return this;
         };
         Tween.prototype.pause = function (time) {
@@ -712,12 +712,16 @@ define(['exports'], (function (exports) { 'use strict';
          * @returns true if the tween is still playing after the update, false
          * otherwise (calling update on a paused tween still returns true because
          * it is still playing, just paused).
+         *
+         * @param autoStart - When true, calling update will implicitly call start()
+         * as well. Note, if you stop() or end() the tween, but are still calling
+         * update(), it will start again!
          */
         Tween.prototype.update = function (time, autoStart) {
             var _this = this;
             var _a;
             if (time === void 0) { time = now(); }
-            if (autoStart === void 0) { autoStart = true; }
+            if (autoStart === void 0) { autoStart = Tween.autoStartOnUpdate; }
             if (this._isPaused)
                 return true;
             var property;
@@ -864,6 +868,7 @@ define(['exports'], (function (exports) { 'use strict';
             }
             this._valuesEnd[property] = tmp;
         };
+        Tween.autoStartOnUpdate = false;
         return Tween;
     }());
 

dist/tween.cjs

@@ -603,7 +603,7 @@ var Tween = /** @class */ (function () {
     };
     Tween.prototype.end = function () {
         this._goToEnd = true;
-        this.update(Infinity);
+        this.update(this._startTime + this._duration);
         return this;
     };
     Tween.prototype.pause = function (time) {
@@ -714,12 +714,16 @@ var Tween = /** @class */ (function () {
      * @returns true if the tween is still playing after the update, false
      * otherwise (calling update on a paused tween still returns true because
      * it is still playing, just paused).
+     *
+     * @param autoStart - When true, calling update will implicitly call start()
+     * as well. Note, if you stop() or end() the tween, but are still calling
+     * update(), it will start again!
      */
     Tween.prototype.update = function (time, autoStart) {
         var _this = this;
         var _a;
         if (time === void 0) { time = now(); }
-        if (autoStart === void 0) { autoStart = true; }
+        if (autoStart === void 0) { autoStart = Tween.autoStartOnUpdate; }
         if (this._isPaused)
             return true;
         var property;
@@ -866,6 +870,7 @@ var Tween = /** @class */ (function () {
         }
         this._valuesEnd[property] = tmp;
     };
+    Tween.autoStartOnUpdate = false;
     return Tween;
 }());
 

dist/tween.d.ts

@@ -53,6 +53,7 @@ declare const Interpolation: {
  */
 
 declare class Tween<T extends UnknownProps = any> {
+    static autoStartOnUpdate: boolean;
     private _isPaused;
     private _pauseStart;
     private _valuesStart;
@@ -143,6 +144,10 @@ declare class Tween<T extends UnknownProps = any> {
      * @returns true if the tween is still playing after the update, false
      * otherwise (calling update on a paused tween still returns true because
      * it is still playing, just paused).
+     *
+     * @param autoStart - When true, calling update will implicitly call start()
+     * as well. Note, if you stop() or end() the tween, but are still calling
+     * update(), it will start again!
      */
     update(time?: number, autoStart?: boolean): boolean;
     private _updateProperties;

dist/tween.esm.js

@@ -599,7 +599,7 @@ var Tween = /** @class */ (function () {
     };
     Tween.prototype.end = function () {
         this._goToEnd = true;
-        this.update(Infinity);
+        this.update(this._startTime + this._duration);
         return this;
     };
     Tween.prototype.pause = function (time) {
@@ -710,12 +710,16 @@ var Tween = /** @class */ (function () {
      * @returns true if the tween is still playing after the update, false
      * otherwise (calling update on a paused tween still returns true because
      * it is still playing, just paused).
+     *
+     * @param autoStart - When true, calling update will implicitly call start()
+     * as well. Note, if you stop() or end() the tween, but are still calling
+     * update(), it will start again!
      */
     Tween.prototype.update = function (time, autoStart) {
         var _this = this;
         var _a;
         if (time === void 0) { time = now(); }
-        if (autoStart === void 0) { autoStart = true; }
+        if (autoStart === void 0) { autoStart = Tween.autoStartOnUpdate; }
         if (this._isPaused)
             return true;
         var property;
@@ -862,6 +866,7 @@ var Tween = /** @class */ (function () {
         }
         this._valuesEnd[property] = tmp;
     };
+    Tween.autoStartOnUpdate = false;
     return Tween;
 }());
 

dist/tween.umd.js

@@ -605,7 +605,7 @@
         };
         Tween.prototype.end = function () {
             this._goToEnd = true;
-            this.update(Infinity);
+            this.update(this._startTime + this._duration);
             return this;
         };
         Tween.prototype.pause = function (time) {
@@ -716,12 +716,16 @@
          * @returns true if the tween is still playing after the update, false
          * otherwise (calling update on a paused tween still returns true because
          * it is still playing, just paused).
+         *
+         * @param autoStart - When true, calling update will implicitly call start()
+         * as well. Note, if you stop() or end() the tween, but are still calling
+         * update(), it will start again!
          */
         Tween.prototype.update = function (time, autoStart) {
             var _this = this;
             var _a;
             if (time === void 0) { time = now(); }
-            if (autoStart === void 0) { autoStart = true; }
+            if (autoStart === void 0) { autoStart = Tween.autoStartOnUpdate; }
             if (this._isPaused)
                 return true;
             var property;
@@ -868,6 +872,7 @@
             }
             this._valuesEnd[property] = tmp;
         };
+        Tween.autoStartOnUpdate = false;
         return Tween;
     }());
 

examples/19_end_tween.html

@@ -0,0 +1,51 @@
+<!-- shows what happens when we call tween.end() -->
+
+<style>
+	#box {
+		background-color: deeppink;
+		width: 100px;
+		height: 100px;
+	}
+</style>
+
+<div id="box"></div>
+
+<button id="end">tween.end()</button>
+
+<script type="module">
+	import {Tween, Easing} from '../dist/tween.esm.js'
+
+	const box = document.getElementById('box') // Get the element we want to animate.
+
+	const coords = {x: 0, y: 0} // Start at (0, 0)
+
+	const tween = new Tween(coords, false) // Create a new tween that modifies 'coords'.
+		.to({x: 300, y: 200}, 5000) // Move to (300, 200) in 1 second.
+		.easing(Easing.Quadratic.InOut) // Use an easing function to make the animation smooth.
+		.onUpdate(() => {
+			// Called after tween.js updates 'coords'.
+			// Move 'box' to the position described by 'coords' with a CSS translation.
+			box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)')
+
+			//
+			console.log(coords, tween.isPlaying())
+		})
+		.onComplete(() => {
+			console.log('onComplete')
+		})
+		.start() // Start the tween immediately.
+
+	// Setup the animation loop.
+	function animate(time) {
+		tween.update(time)
+		requestAnimationFrame(animate)
+	}
+
+	requestAnimationFrame(animate)
+
+	document.querySelector('#end').addEventListener('click', () => {
+		console.log('tween.end')
+		tween.end()
+		console.log(tween)
+	})
+</script>

src/Tween.ts

@@ -18,6 +18,8 @@ import type {InterpolationFunction} from './Interpolation'
 import type Group from './Group'
 
 export class Tween<T extends UnknownProps = any> {
+	static autoStartOnUpdate = false
+
 	private _isPaused = false
 	private _pauseStart = 0
 	private _valuesStart: UnknownProps = {}
@@ -292,7 +294,7 @@ export class Tween<T extends UnknownProps = any> {
 
 	end(): this {
 		this._goToEnd = true
-		this.update(Infinity)
+		this.update(this._startTime + this._duration)
 		return this
 	}
 
@@ -430,8 +432,12 @@ export class Tween<T extends UnknownProps = any> {
 	 * @returns true if the tween is still playing after the update, false
 	 * otherwise (calling update on a paused tween still returns true because
 	 * it is still playing, just paused).
+	 *
+	 * @param autoStart - When true, calling update will implicitly call start()
+	 * as well. Note, if you stop() or end() the tween, but are still calling
+	 * update(), it will start again!
 	 */
-	update(time = now(), autoStart = true): boolean {
+	update(time = now(), autoStart = Tween.autoStartOnUpdate): boolean {
 		if (this._isPaused) return true
 
 		let property

src/tests.ts

@@ -520,6 +520,8 @@ export const tests = {
 	},
 
 	'Ensure tweens start without calling start() method.'(test: Test): void {
+		TWEEN.Tween.autoStartOnUpdate = true
+
 		const obj = {x: 0},
 			t = new TWEEN.Tween(obj)
 
@@ -538,6 +540,8 @@ export const tests = {
 		test.deepEqual(obj.x, 1000)
 		test.deepEqual(started, false)
 
+		TWEEN.Tween.autoStartOnUpdate = false
+
 		test.done()
 	},