@tweenjs/tween.js 23.1.2 → 24.0.0

package/dist/tween.cjs

@@ -227,33 +227,61 @@ var now = function () { return performance.now(); };
  */
 var Group = /** @class */ (function () {
     function Group() {
+        var tweens = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            tweens[_i] = arguments[_i];
+        }
         this._tweens = {};
         this._tweensAddedDuringUpdate = {};
+        this.add.apply(this, tweens);
     }
     Group.prototype.getAll = function () {
         var _this = this;
-        return Object.keys(this._tweens).map(function (tweenId) {
-            return _this._tweens[tweenId];
-        });
+        return Object.keys(this._tweens).map(function (tweenId) { return _this._tweens[tweenId]; });
     };
     Group.prototype.removeAll = function () {
         this._tweens = {};
     };
-    Group.prototype.add = function (tween) {
-        this._tweens[tween.getId()] = tween;
-        this._tweensAddedDuringUpdate[tween.getId()] = tween;
+    Group.prototype.add = function () {
+        var _a;
+        var tweens = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            tweens[_i] = arguments[_i];
+        }
+        for (var _b = 0, tweens_1 = tweens; _b < tweens_1.length; _b++) {
+            var tween = tweens_1[_b];
+            // Remove from any other group first, a tween can only be in one group at a time.
+            // @ts-expect-error library internal access
+            (_a = tween._group) === null || _a === void 0 ? void 0 : _a.remove(tween);
+            // @ts-expect-error library internal access
+            tween._group = this;
+            this._tweens[tween.getId()] = tween;
+            this._tweensAddedDuringUpdate[tween.getId()] = tween;
+        }
+    };
+    Group.prototype.remove = function () {
+        var tweens = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            tweens[_i] = arguments[_i];
+        }
+        for (var _a = 0, tweens_2 = tweens; _a < tweens_2.length; _a++) {
+            var tween = tweens_2[_a];
+            // @ts-expect-error library internal access
+            tween._group = undefined;
+            delete this._tweens[tween.getId()];
+            delete this._tweensAddedDuringUpdate[tween.getId()];
+        }
     };
-    Group.prototype.remove = function (tween) {
-        delete this._tweens[tween.getId()];
-        delete this._tweensAddedDuringUpdate[tween.getId()];
+    /** Return true if all tweens in the group are not paused or playing. */
+    Group.prototype.allStopped = function () {
+        return this.getAll().every(function (tween) { return !tween.isPlaying(); });
     };
     Group.prototype.update = function (time, preserve) {
         if (time === void 0) { time = now(); }
-        if (preserve === void 0) { preserve = false; }
+        if (preserve === void 0) { preserve = true; }
         var tweenIds = Object.keys(this._tweens);
-        if (tweenIds.length === 0) {
-            return false;
-        }
+        if (tweenIds.length === 0)
+            return;
         // Tweens are updated in "batches". If you add a new tween during an
         // update, then the new tween will be updated in the next batch.
         // If you remove a tween during an update, it may or may not be updated.
@@ -264,13 +292,11 @@ var Group = /** @class */ (function () {
             for (var i = 0; i < tweenIds.length; i++) {
                 var tween = this._tweens[tweenIds[i]];
                 var autoStart = !preserve;
-                if (tween && tween.update(time, autoStart) === false && !preserve) {
-                    delete this._tweens[tweenIds[i]];
-                }
+                if (tween && tween.update(time, autoStart) === false && !preserve)
+                    this.remove(tween);
             }
             tweenIds = Object.keys(this._tweensAddedDuringUpdate);
         }
-        return true;
     };
     return Group;
 }());
@@ -379,10 +405,7 @@ var mainGroup = new Group();
  * Thank you all, you're awesome!
  */
 var Tween = /** @class */ (function () {
-    function Tween(_object, _group) {
-        if (_group === void 0) { _group = mainGroup; }
-        this._object = _object;
-        this._group = _group;
+    function Tween(object, group) {
         this._isPaused = false;
         this._pauseStart = 0;
         this._valuesStart = {};
@@ -407,6 +430,16 @@ var Tween = /** @class */ (function () {
         this._isChainStopped = false;
         this._propertiesAreSetUp = false;
         this._goToEnd = false;
+        this._object = object;
+        if (typeof group === 'object') {
+            this._group = group;
+            group.add(this);
+        }
+        // Use "true" to restore old behavior (will be removed in future release).
+        else if (group === true) {
+            this._group = mainGroup;
+            mainGroup.add(this);
+        }
     }
     Tween.prototype.getId = function () {
         return this._id;
@@ -445,8 +478,6 @@ var Tween = /** @class */ (function () {
         if (this._isPlaying) {
             return this;
         }
-        // eslint-disable-next-line
-        this._group && this._group.add(this);
         this._repeat = this._initialRepeat;
         if (this._reversed) {
             // If we were reversed (f.e. using the yoyo feature) then we need to
@@ -563,8 +594,6 @@ var Tween = /** @class */ (function () {
         if (!this._isPlaying) {
             return this;
         }
-        // eslint-disable-next-line
-        this._group && this._group.remove(this);
         this._isPlaying = false;
         this._isPaused = false;
         if (this._onStopCallback) {
@@ -584,8 +613,6 @@ var Tween = /** @class */ (function () {
         }
         this._isPaused = true;
         this._pauseStart = time;
-        // eslint-disable-next-line
-        this._group && this._group.remove(this);
         return this;
     };
     Tween.prototype.resume = function (time) {
@@ -596,8 +623,6 @@ var Tween = /** @class */ (function () {
         this._isPaused = false;
         this._startTime += time - this._pauseStart;
         this._pauseStart = 0;
-        // eslint-disable-next-line
-        this._group && this._group.add(this);
         return this;
     };
     Tween.prototype.stopChainedTweens = function () {
@@ -607,8 +632,19 @@ var Tween = /** @class */ (function () {
         return this;
     };
     Tween.prototype.group = function (group) {
-        if (group === void 0) { group = mainGroup; }
-        this._group = group;
+        if (!group) {
+            console.warn('tween.group() without args has been removed, use group.add(tween) instead.');
+            return this;
+        }
+        group.add(this);
+        return this;
+    };
+    /**
+     * Removes the tween from whichever group it is in.
+     */
+    Tween.prototype.remove = function () {
+        var _a;
+        (_a = this._group) === null || _a === void 0 ? void 0 : _a.remove(this);
         return this;
     };
     Tween.prototype.delay = function (amount) {
@@ -680,17 +716,18 @@ var Tween = /** @class */ (function () {
      * it is still playing, just paused).
      */
     Tween.prototype.update = function (time, autoStart) {
+        var _this = this;
         var _a;
         if (time === void 0) { time = now(); }
         if (autoStart === void 0) { autoStart = true; }
         if (this._isPaused)
             return true;
-        var endTime = this._startTime + this._duration;
+        var property;
         if (!this._goToEnd && !this._isPlaying) {
-            if (time > endTime)
-                return false;
             if (autoStart)
                 this.start(time, true);
+            else
+                return false;
         }
         this._goToEnd = false;
         if (time < this._startTime) {
@@ -711,85 +748,72 @@ var Tween = /** @class */ (function () {
         var elapsedTime = time - this._startTime;
         var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime);
         var totalTime = this._duration + this._repeat * durationAndDelay;
-        var elapsed = this._calculateElapsedPortion(elapsedTime, durationAndDelay, totalTime);
+        var calculateElapsedPortion = function () {
+            if (_this._duration === 0)
+                return 1;
+            if (elapsedTime > totalTime) {
+                return 1;
+            }
+            var timesRepeated = Math.trunc(elapsedTime / durationAndDelay);
+            var timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay;
+            // TODO use %?
+            // const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
+            var portion = Math.min(timeIntoCurrentRepeat / _this._duration, 1);
+            if (portion === 0 && elapsedTime === _this._duration) {
+                return 1;
+            }
+            return portion;
+        };
+        var elapsed = calculateElapsedPortion();
         var value = this._easingFunction(elapsed);
-        var status = this._calculateCompletionStatus(elapsedTime, durationAndDelay);
-        if (status === 'repeat') {
-            // the current update is happening after the instant the tween repeated
-            this._processRepetition(elapsedTime, durationAndDelay);
-        }
+        // properties transformations
         this._updateProperties(this._object, this._valuesStart, this._valuesEnd, value);
-        if (status === 'about-to-repeat') {
-            // the current update is happening at the exact instant the tween is going to repeat
-            // the values should match the end of the tween, not the beginning,
-            // that's why _processRepetition happens after _updateProperties
-            this._processRepetition(elapsedTime, durationAndDelay);
-        }
         if (this._onUpdateCallback) {
             this._onUpdateCallback(this._object, elapsed);
         }
-        if (status === 'repeat' || status === 'about-to-repeat') {
-            if (this._onRepeatCallback) {
-                this._onRepeatCallback(this._object);
-            }
-            this._onEveryStartCallbackFired = false;
-        }
-        else if (status === 'completed') {
-            this._isPlaying = false;
-            if (this._onCompleteCallback) {
-                this._onCompleteCallback(this._object);
-            }
-            for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
-                // Make the chained tweens start exactly at the time they should,
-                // even if the `update()` method was called way past the duration of the tween
-                this._chainedTweens[i].start(this._startTime + this._duration, false);
-            }
-        }
-        return status !== 'completed';
-    };
-    Tween.prototype._calculateElapsedPortion = function (elapsedTime, durationAndDelay, totalTime) {
-        if (this._duration === 0 || elapsedTime > totalTime) {
-            return 1;
-        }
-        var timeIntoCurrentRepeat = elapsedTime % durationAndDelay;
-        var portion = Math.min(timeIntoCurrentRepeat / this._duration, 1);
-        if (portion === 0 && elapsedTime !== 0 && elapsedTime % this._duration === 0) {
-            return 1;
-        }
-        return portion;
-    };
-    Tween.prototype._calculateCompletionStatus = function (elapsedTime, durationAndDelay) {
-        if (this._duration !== 0 && elapsedTime < this._duration) {
-            return 'playing';
-        }
-        if (this._repeat <= 0) {
-            return 'completed';
-        }
-        if (elapsedTime === this._duration) {
-            return 'about-to-repeat';
-        }
-        return 'repeat';
-    };
-    Tween.prototype._processRepetition = function (elapsedTime, durationAndDelay) {
-        var completeCount = Math.min(Math.trunc((elapsedTime - this._duration) / durationAndDelay) + 1, this._repeat);
-        if (isFinite(this._repeat)) {
-            this._repeat -= completeCount;
-        }
-        // Reassign starting values, restart by making startTime = now
-        for (var property in this._valuesStartRepeat) {
-            var valueEnd = this._valuesEnd[property];
-            if (!this._yoyo && typeof valueEnd === 'string') {
-                this._valuesStartRepeat[property] = this._valuesStartRepeat[property] + parseFloat(valueEnd);
+        if (this._duration === 0 || elapsedTime >= this._duration) {
+            if (this._repeat > 0) {
+                var completeCount = Math.min(Math.trunc((elapsedTime - this._duration) / durationAndDelay) + 1, this._repeat);
+                if (isFinite(this._repeat)) {
+                    this._repeat -= completeCount;
+                }
+                // Reassign starting values, restart by making startTime = now
+                for (property in this._valuesStartRepeat) {
+                    if (!this._yoyo && typeof this._valuesEnd[property] === 'string') {
+                        this._valuesStartRepeat[property] =
+                            // eslint-disable-next-line
+                            // @ts-ignore FIXME?
+                            this._valuesStartRepeat[property] + parseFloat(this._valuesEnd[property]);
+                    }
+                    if (this._yoyo) {
+                        this._swapEndStartRepeatValues(property);
+                    }
+                    this._valuesStart[property] = this._valuesStartRepeat[property];
+                }
+                if (this._yoyo) {
+                    this._reversed = !this._reversed;
+                }
+                this._startTime += durationAndDelay * completeCount;
+                if (this._onRepeatCallback) {
+                    this._onRepeatCallback(this._object);
+                }
+                this._onEveryStartCallbackFired = false;
+                return true;
             }
-            if (this._yoyo) {
-                this._swapEndStartRepeatValues(property);
+            else {
+                if (this._onCompleteCallback) {
+                    this._onCompleteCallback(this._object);
+                }
+                for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
+                    // Make the chained tweens start exactly at the time they should,
+                    // even if the `update()` method was called way past the duration of the tween
+                    this._chainedTweens[i].start(this._startTime + this._duration, false);
+                }
+                this._isPlaying = false;
+                return false;
             }
-            this._valuesStart[property] = this._valuesStartRepeat[property];
         }
-        if (this._yoyo) {
-            this._reversed = !this._reversed;
-        }
-        this._startTime += durationAndDelay * completeCount;
+        return true;
     };
     Tween.prototype._updateProperties = function (_object, _valuesStart, _valuesEnd, value) {
         for (var property in _valuesEnd) {
@@ -845,7 +869,7 @@ var Tween = /** @class */ (function () {
     return Tween;
 }());
 
-var VERSION = '23.1.2';
+var VERSION = '24.0.0';
 
 /**
  * Tween.js - Licensed under the MIT license
@@ -867,10 +891,245 @@ var TWEEN = mainGroup;
 // Modules and CommonJS, without build hacks, and so as not to break the
 // existing API.
 // https://github.com/rollup/rollup/issues/1961#issuecomment-423037881
+/**
+ * @deprecated The global TWEEN Group will be removed in a following major
+ * release. To migrate, create a `new Group()` instead of using `TWEEN` as a
+ * group.
+ *
+ * Old code:
+ *
+ * ```js
+ * import * as TWEEN from '@tweenjs/tween.js'
+ *
+ * //...
+ *
+ * const tween = new TWEEN.Tween(obj)
+ * const tween2 = new TWEEN.Tween(obj2)
+ *
+ * //...
+ *
+ * requestAnimationFrame(function loop(time) {
+ *   TWEEN.update(time)
+ *   requestAnimationFrame(loop)
+ * })
+ * ```
+ *
+ * New code:
+ *
+ * ```js
+ * import {Tween, Group} from '@tweenjs/tween.js'
+ *
+ * //...
+ *
+ * const tween = new Tween(obj)
+ * const tween2 = new TWEEN.Tween(obj2)
+ *
+ * //...
+ *
+ * const group = new Group()
+ * group.add(tween)
+ * group.add(tween2)
+ *
+ * //...
+ *
+ * requestAnimationFrame(function loop(time) {
+ *   group.update(time)
+ *   requestAnimationFrame(loop)
+ * })
+ * ```
+ */
 var getAll = TWEEN.getAll.bind(TWEEN);
+/**
+ * @deprecated The global TWEEN Group will be removed in a following major
+ * release. To migrate, create a `new Group()` instead of using `TWEEN` as a
+ * group.
+ *
+ * Old code:
+ *
+ * ```js
+ * import * as TWEEN from '@tweenjs/tween.js'
+ *
+ * //...
+ *
+ * const tween = new TWEEN.Tween(obj)
+ * const tween2 = new TWEEN.Tween(obj2)
+ *
+ * //...
+ *
+ * requestAnimationFrame(function loop(time) {
+ *   TWEEN.update(time)
+ *   requestAnimationFrame(loop)
+ * })
+ * ```
+ *
+ * New code:
+ *
+ * ```js
+ * import {Tween, Group} from '@tweenjs/tween.js'
+ *
+ * //...
+ *
+ * const tween = new Tween(obj)
+ * const tween2 = new TWEEN.Tween(obj2)
+ *
+ * //...
+ *
+ * const group = new Group()
+ * group.add(tween)
+ * group.add(tween2)
+ *
+ * //...
+ *
+ * requestAnimationFrame(function loop(time) {
+ *   group.update(time)
+ *   requestAnimationFrame(loop)
+ * })
+ * ```
+ */
 var removeAll = TWEEN.removeAll.bind(TWEEN);
+/**
+ * @deprecated The global TWEEN Group will be removed in a following major
+ * release. To migrate, create a `new Group()` instead of using `TWEEN` as a
+ * group.
+ *
+ * Old code:
+ *
+ * ```js
+ * import * as TWEEN from '@tweenjs/tween.js'
+ *
+ * //...
+ *
+ * const tween = new TWEEN.Tween(obj)
+ * const tween2 = new TWEEN.Tween(obj2)
+ *
+ * //...
+ *
+ * requestAnimationFrame(function loop(time) {
+ *   TWEEN.update(time)
+ *   requestAnimationFrame(loop)
+ * })
+ * ```
+ *
+ * New code:
+ *
+ * ```js
+ * import {Tween, Group} from '@tweenjs/tween.js'
+ *
+ * //...
+ *
+ * const tween = new Tween(obj)
+ * const tween2 = new TWEEN.Tween(obj2)
+ *
+ * //...
+ *
+ * const group = new Group()
+ * group.add(tween)
+ * group.add(tween2)
+ *
+ * //...
+ *
+ * requestAnimationFrame(function loop(time) {
+ *   group.update(time)
+ *   requestAnimationFrame(loop)
+ * })
+ * ```
+ */
 var add = TWEEN.add.bind(TWEEN);
+/**
+ * @deprecated The global TWEEN Group will be removed in a following major
+ * release. To migrate, create a `new Group()` instead of using `TWEEN` as a
+ * group.
+ *
+ * Old code:
+ *
+ * ```js
+ * import * as TWEEN from '@tweenjs/tween.js'
+ *
+ * //...
+ *
+ * const tween = new TWEEN.Tween(obj)
+ * const tween2 = new TWEEN.Tween(obj2)
+ *
+ * //...
+ *
+ * requestAnimationFrame(function loop(time) {
+ *   TWEEN.update(time)
+ *   requestAnimationFrame(loop)
+ * })
+ * ```
+ *
+ * New code:
+ *
+ * ```js
+ * import {Tween, Group} from '@tweenjs/tween.js'
+ *
+ * //...
+ *
+ * const tween = new Tween(obj)
+ * const tween2 = new TWEEN.Tween(obj2)
+ *
+ * //...
+ *
+ * const group = new Group()
+ * group.add(tween)
+ * group.add(tween2)
+ *
+ * //...
+ *
+ * requestAnimationFrame(function loop(time) {
+ *   group.update(time)
+ *   requestAnimationFrame(loop)
+ * })
+ * ```
+ */
 var remove = TWEEN.remove.bind(TWEEN);
+/**
+ * @deprecated The global TWEEN Group will be removed in a following major
+ * release. To migrate, create a `new Group()` instead of using `TWEEN` as a
+ * group.
+ *
+ * Old code:
+ *
+ * ```js
+ * import * as TWEEN from '@tweenjs/tween.js'
+ *
+ * //...
+ *
+ * const tween = new TWEEN.Tween(obj)
+ * const tween2 = new TWEEN.Tween(obj2)
+ *
+ * //...
+ *
+ * requestAnimationFrame(function loop(time) {
+ *   TWEEN.update(time)
+ *   requestAnimationFrame(loop)
+ * })
+ * ```
+ *
+ * New code:
+ *
+ * ```js
+ * import {Tween, Group} from '@tweenjs/tween.js'
+ *
+ * //...
+ *
+ * const tween = new Tween(obj)
+ * const tween2 = new TWEEN.Tween(obj2)
+ *
+ * //...
+ *
+ * const group = new Group()
+ * group.add(tween)
+ * group.add(tween2)
+ *
+ * //...
+ *
+ * requestAnimationFrame(function loop(time) {
+ *   group.update(time)
+ *   requestAnimationFrame(loop)
+ * })
+ * ```
+ */
 var update = TWEEN.update.bind(TWEEN);
 var exports$1 = {
     Easing: Easing,
@@ -881,10 +1140,245 @@ var exports$1 = {
     nextId: nextId,
     Tween: Tween,
     VERSION: VERSION,
+    /**
+     * @deprecated The global TWEEN Group will be removed in a following major
+     * release. To migrate, create a `new Group()` instead of using `TWEEN` as a
+     * group.
+     *
+     * Old code:
+     *
+     * ```js
+     * import * as TWEEN from '@tweenjs/tween.js'
+     *
+     * //...
+     *
+     * const tween = new TWEEN.Tween(obj)
+     * const tween2 = new TWEEN.Tween(obj2)
+     *
+     * //...
+     *
+     * requestAnimationFrame(function loop(time) {
+     *   TWEEN.update(time)
+     *   requestAnimationFrame(loop)
+     * })
+     * ```
+     *
+     * New code:
+     *
+     * ```js
+     * import {Tween, Group} from '@tweenjs/tween.js'
+     *
+     * //...
+     *
+     * const tween = new Tween(obj)
+     * const tween2 = new TWEEN.Tween(obj2)
+     *
+     * //...
+     *
+     * const group = new Group()
+     * group.add(tween)
+     * group.add(tween2)
+     *
+     * //...
+     *
+     * requestAnimationFrame(function loop(time) {
+     *   group.update(time)
+     *   requestAnimationFrame(loop)
+     * })
+     * ```
+     */
     getAll: getAll,
+    /**
+     * @deprecated The global TWEEN Group will be removed in a following major
+     * release. To migrate, create a `new Group()` instead of using `TWEEN` as a
+     * group.
+     *
+     * Old code:
+     *
+     * ```js
+     * import * as TWEEN from '@tweenjs/tween.js'
+     *
+     * //...
+     *
+     * const tween = new TWEEN.Tween(obj)
+     * const tween2 = new TWEEN.Tween(obj2)
+     *
+     * //...
+     *
+     * requestAnimationFrame(function loop(time) {
+     *   TWEEN.update(time)
+     *   requestAnimationFrame(loop)
+     * })
+     * ```
+     *
+     * New code:
+     *
+     * ```js
+     * import {Tween, Group} from '@tweenjs/tween.js'
+     *
+     * //...
+     *
+     * const tween = new Tween(obj)
+     * const tween2 = new TWEEN.Tween(obj2)
+     *
+     * //...
+     *
+     * const group = new Group()
+     * group.add(tween)
+     * group.add(tween2)
+     *
+     * //...
+     *
+     * requestAnimationFrame(function loop(time) {
+     *   group.update(time)
+     *   requestAnimationFrame(loop)
+     * })
+     * ```
+     */
     removeAll: removeAll,
+    /**
+     * @deprecated The global TWEEN Group will be removed in a following major
+     * release. To migrate, create a `new Group()` instead of using `TWEEN` as a
+     * group.
+     *
+     * Old code:
+     *
+     * ```js
+     * import * as TWEEN from '@tweenjs/tween.js'
+     *
+     * //...
+     *
+     * const tween = new TWEEN.Tween(obj)
+     * const tween2 = new TWEEN.Tween(obj2)
+     *
+     * //...
+     *
+     * requestAnimationFrame(function loop(time) {
+     *   TWEEN.update(time)
+     *   requestAnimationFrame(loop)
+     * })
+     * ```
+     *
+     * New code:
+     *
+     * ```js
+     * import {Tween, Group} from '@tweenjs/tween.js'
+     *
+     * //...
+     *
+     * const tween = new Tween(obj)
+     * const tween2 = new TWEEN.Tween(obj2)
+     *
+     * //...
+     *
+     * const group = new Group()
+     * group.add(tween)
+     * group.add(tween2)
+     *
+     * //...
+     *
+     * requestAnimationFrame(function loop(time) {
+     *   group.update(time)
+     *   requestAnimationFrame(loop)
+     * })
+     * ```
+     */
     add: add,
+    /**
+     * @deprecated The global TWEEN Group will be removed in a following major
+     * release. To migrate, create a `new Group()` instead of using `TWEEN` as a
+     * group.
+     *
+     * Old code:
+     *
+     * ```js
+     * import * as TWEEN from '@tweenjs/tween.js'
+     *
+     * //...
+     *
+     * const tween = new TWEEN.Tween(obj)
+     * const tween2 = new TWEEN.Tween(obj2)
+     *
+     * //...
+     *
+     * requestAnimationFrame(function loop(time) {
+     *   TWEEN.update(time)
+     *   requestAnimationFrame(loop)
+     * })
+     * ```
+     *
+     * New code:
+     *
+     * ```js
+     * import {Tween, Group} from '@tweenjs/tween.js'
+     *
+     * //...
+     *
+     * const tween = new Tween(obj)
+     * const tween2 = new TWEEN.Tween(obj2)
+     *
+     * //...
+     *
+     * const group = new Group()
+     * group.add(tween)
+     * group.add(tween2)
+     *
+     * //...
+     *
+     * requestAnimationFrame(function loop(time) {
+     *   group.update(time)
+     *   requestAnimationFrame(loop)
+     * })
+     * ```
+     */
     remove: remove,
+    /**
+     * @deprecated The global TWEEN Group will be removed in a following major
+     * release. To migrate, create a `new Group()` instead of using `TWEEN` as a
+     * group.
+     *
+     * Old code:
+     *
+     * ```js
+     * import * as TWEEN from '@tweenjs/tween.js'
+     *
+     * //...
+     *
+     * const tween = new TWEEN.Tween(obj)
+     * const tween2 = new TWEEN.Tween(obj2)
+     *
+     * //...
+     *
+     * requestAnimationFrame(function loop(time) {
+     *   TWEEN.update(time)
+     *   requestAnimationFrame(loop)
+     * })
+     * ```
+     *
+     * New code:
+     *
+     * ```js
+     * import {Tween, Group} from '@tweenjs/tween.js'
+     *
+     * //...
+     *
+     * const tween = new Tween(obj)
+     * const tween2 = new TWEEN.Tween(obj2)
+     *
+     * //...
+     *
+     * const group = new Group()
+     * group.add(tween)
+     * group.add(tween2)
+     *
+     * //...
+     *
+     * requestAnimationFrame(function loop(time) {
+     *   group.update(time)
+     *   requestAnimationFrame(loop)
+     * })
+     * ```
+     */
     update: update,
 };