From f28f0694f20b1e48ac1650dc2d850cf7b087468b Mon Sep 17 00:00:00 2001
From: Joe Pea <joe@trusktr.io>
Date: Thu, 25 Jul 2024 17:30:02 -0700
Subject: [PATCH] feat: do not automatically add/remove a tween to/from its
 associated group

feat: the `tween.group(group)` method now has a reciprocal `tween.remove()`
method that will remove a tween from its associated group, and unassociate the
group. `tween.group()` without an arg is no longer valid, see breaking changes
and migration below.

fix: when a tween is stopped before its end time, do not allow its update method
to continue, therefore preventing logic (f.e. repeat logic) from being
triggered

docs: improved the docs, adding some missing information, removing all examples
of the global `TWEEN` group which has been deprecated, and adding docs on how to
manage groups of tweens. Also updated samples to use `import` syntax for
importing Tween, avoiding the use of the `TWEEN` UMD global variable which has
been deprecated.

feat: A new `Group.allStopped()` method returns true if all tweens in
a group are not playing (i.e. stopped, and not paused), otherwise false.
Useful for stopping an animation loop once all tweens in a group have
finished their animation.

BREAKING:

- Tweens are no longer automatically added or removed from groups by default
  when you call any Tween methods such as `start()`, `stop()`, or `pause()`, and
  the `preserve` parameter to `Group.update()` now defaults to `true` and is
  deprecated to be removed in a future major version.
  - MIGRATION: To keep old behavior for a while, explicitly call
    `group.update()` with `false` for the second parameter. To migrate forward, do
    not rely on automatic add/remove of tweens, and instead add/remove tweens
    to/from groups manually.
- `Group.update()` no longer returns a boolean indicating if all tweens
  have been removed.
  - MIGRATION: Don't rely on auto-add/remove to/from groups. This
    boolean return was previously useful for stopping an animation loop
    once all tweens were finished animating. Instead, use the new
    `Group.allStopped()` method to check if all tweens in a group are stopped in
    order to determine whether or not to continue an animation loop.
- The second `group` parameter to `Tween.constructor` now defaults to
  `undefined` instead of the global `TWEEN` group. Additionally it
  accepts a value of `true` to restore the old default behavior. The
  `true` value is deprecated and will be removed in a future major
  version.
  - MIGRATION: For the time being the parameter can be set to `true` to restore
    the old behavior. To migrate forward, use `tween.group(group)` or
    `group.add(tween)` instead.
- The argless `tween.group()` signature has been removed.
  - MIGRATION: Use `group.add(tween)` or `group.remove(tween)` instead.
    `tween.group(TWEEN)`, `TWEEN.add(tween)`, and `TWEEN.remove(tween)` will also
    work for now, but they are deprecated and will be removed in a future major
    version.
- `Group.update`'s second parameter `preserve` defaults to `true` now, and is
  deprecated to be removed in a future major version, at which point tweens of a
  group will no longer be automatically added/remove to/from a group when calling
  any Tween methods such as `start()`, `pause()`, or `stop()`.
  - MIGRATION: For now, explicitly set the parameter to `false` to restore old
    default behavior when calling `group.update()`. To migrate forward, do not
    rely on the automatic add/remove behavior, and instead manually add or remove
    tweens to or from groups.
- To make the fix for `tween.update()` to be a no-op for stopped tweens, we had
  to break an undocumented feature that allowed tweens to move backward in time
  (https://github.com/tweenjs/tween.js/pull/271).
  - MIGRATION: To move tweens backward in time after they have already
    completed, first call `tween.start(startTime)` then proceed to call
    `tween.update(time)` in reverse order as before (see the unit test with "go
    backward in time" in its name). Without calling `tween.start()` nothing will
    happen because stopped/completed tweens will now always return early from
    `update()`, as they are considered to be no longer running.
---
 README.md                                     | 294 +++++----
 README_zh-CN.md                               |  12 +-
 dist/tween.amd.js                             | 573 ++++++++++++++++--
 dist/tween.cjs                                | 573 ++++++++++++++++--
 dist/tween.d.ts                               | 569 ++++++++++++++++-
 dist/tween.esm.js                             | 573 ++++++++++++++++--
 dist/tween.umd.js                             | 573 ++++++++++++++++--
 docs/user_guide.md                            | 195 +++---
 docs/user_guide_zh-CN.md                      |  44 +-
 examples/00_hello_world.html                  |  27 +-
 examples/01_bars.html                         | 104 ++--
 examples/02_black_and_red.html                |  85 +--
 examples/03_graphs.html                       |  75 +--
 examples/04_simplest.html                     |  38 +-
 examples/05_video_and_time.html               |  22 +-
 examples/06_array_interpolation.html          | 131 +---
 examples/07_dynamic_to.html                   |  50 +-
 examples/07a_dynamic_to_two_array_values.html | 122 ++--
 .../07b_dynamic_to_an_array_of_values.html    | 129 ++--
 examples/08_repeat.html                       |  43 +-
 examples/09_relative_values.html              |  39 +-
 examples/09_relative_values.js                |  29 +
 examples/10_yoyo.html                         | 114 +---
 examples/10_yoyo.js                           | 102 ++++
 examples/11_stop_all_chained_tweens.html      |  29 +-
 examples/12_graphs_custom_functions.html      |  35 +-
 examples/13_relative_start_time.html          |  37 +-
 examples/14_pause_tween.html                  |  36 +-
 examples/15_complex_properties.html           |  47 +-
 examples/16_animate_an_array_of_values.html   |  37 +-
 examples/17_generate_pow.html                 |  54 +-
 examples/18_start_from_current_values.html    |  39 +-
 .../plain-javascript-modules/animate.js       |  17 +-
 .../plain-javascript-modules/index.js         |   8 +-
 .../plain-typescript-modules/animate.js       |  17 +-
 .../plain-typescript-modules/animate.ts       |  17 +-
 .../plain-typescript-modules/index.js         |  21 +-
 .../plain-typescript-modules/index.ts         |  13 +-
 .../plain-typescript-modules/tsconfig.json    |   3 +-
 examples/js/createGraph.js                    |  23 +-
 examples/js/createPath.js                     | 101 +++
 examples/js/toPhysicalPx.js                   |   1 +
 src/Group.ts                                  |  75 ++-
 src/Index.ts                                  | 471 ++++++++++++++
 src/Tween.ts                                  |  76 ++-
 src/tests.ts                                  | 359 ++++++-----
 46 files changed, 4607 insertions(+), 1425 deletions(-)
 create mode 100644 examples/09_relative_values.js
 create mode 100644 examples/10_yoyo.js
 create mode 100644 examples/js/createPath.js
 create mode 100644 examples/js/toPhysicalPx.js

diff --git a/README.md b/README.md
index 4c825fd9..c881f761 100644
--- a/README.md
+++ b/README.md
@@ -12,8 +12,6 @@ More languages: [English](./README.md), [简体中文](./README_zh-CN.md)
 ---
 
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></script>
-
 <div id="box"></div>
 
 <style>
@@ -24,14 +22,16 @@ More languages: [English](./README.md), [简体中文](./README_zh-CN.md)
 	}
 </style>
 
-<script>
+<script type="module">
+	import {Tween, Easing} from 'https://unpkg.com/@tweenjs/tween.js@23.1.3/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.Tween(coords, false) // Create a new tween that modifies 'coords'.
+	const tween = new Tween(coords, false) // Create a new tween that modifies 'coords'.
 		.to({x: 300, y: 200}, 1000) // Move to (300, 200) in 1 second.
-		.easing(TWEEN.Easing.Quadratic.InOut) // Use an easing function to make the animation smooth.
+		.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.
@@ -50,109 +50,15 @@ More languages: [English](./README.md), [简体中文](./README_zh-CN.md)
 
 [Try this example on CodePen](https://codepen.io/trusktr/pen/KKGaBVz?editors=1000)
 
-# Installation
-
-## From CDN
-
-Install from a content-delivery network (CDN) like in the above example.
-
-From cdnjs:
-
-```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></script>
-```
-
-Or from unpkg.com:
-
-```html
-<script src="https://unpkg.com/@tweenjs/tween.js@^20.0.0/dist/tween.umd.js"></script>
-```
-
-Note that unpkg.com supports a semver version in the URL, where the `^` in the URL tells unpkg to give you the latest version 20.x.x.
-
-## Build and include in your project with script tag
-
-Currently npm is required to build the project.
-
-```bash
-git clone https://github.com/tweenjs/tween.js
-cd tween.js
-npm install
-npm run build
-```
-
-This will create some builds in the `dist` directory. There are currently two different builds of the library:
-
-- UMD : `tween.umd.js`
-- ES6 Module : `tween.es.js`
-
-You are now able to copy tween.umd.js into your project, then include it with
-a script tag, which will add TWEEN to the global scope,
-
-```html
-<script src="path/to/tween.umd.js"></script>
-```
-
-or import TWEEN as a JavaScript module,
-
-```html
-<script type="module">
-	import * as TWEEN from 'path/to/tween.es.js'
-</script>
-```
-
-where `path/to` is replaced with the location where you placed the file.
-
-## With `npm install` and `import` from `node_modules`
-
-You can add tween.js as an npm dependency:
-
-```bash
-npm install @tweenjs/tween.js
-```
-
-### With a build tool
-
-If you are using [Node.js](https://nodejs.org/), [Parcel](https://parceljs.org/), [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/), [Vite](https://vitejs.dev/), or another build tool, then you can now use the following to include tween.js:
-
-```javascript
-import * as TWEEN from '@tweenjs/tween.js'
-```
-
-### Without a build tool
-
-You can import from `node_modules` if you serve node_modules as part of your website, using an `importmap` script tag. First, assuming `node_modules` is at the root of your website, you can write an import map:
-
-```html
-<script type="importmap">
-	{
-		"imports": {
-			"@tweenjs/tween.js": "./node_modules/@tweenjs/tween.js/dist/tween.esm.js"
-		}
-	}
-</script>
-```
-
-Now in any of your module scripts you can import it by its package name:
-
-```javascript
-import * as TWEEN from '@tweenjs/tween.js'
-```
-
 # Features
 
-- Does one thing and one thing only: tween properties
+- Does one thing only and does it well: tweens properties of an object
 - Doesn't take care of CSS units (e.g. appending `px`)
 - Doesn't interpolate colors
 - Easing functions are reusable outside of Tween
 - Can also use custom easing functions
-
-# Documentation
-
-- [User guide](./docs/user_guide.md)
-- [Contributor guide](./docs/contributor_guide.md)
-- [Tutorial](https://web.archive.org/web/20220601192930/http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/) using tween.js with three.js
-- Also: [libtween](https://github.com/jsm174/libtween), a port of tween.js to C by [jsm174](https://github.com/jsm174)
+- Doesn't make its own animation loop, making it flexible for integration into
+  any animation loop.
 
 # Examples
 
@@ -350,6 +256,184 @@ import * as TWEEN from '@tweenjs/tween.js'
 	</tr>
 </table>
 
+# Installation
+
+The recommended method is to use `import` syntax. Here we've listed various
+install methods starting roughly with the most recommended first and least
+desirable last. Evaluate all of the following methods to pick what is most
+suitable for your project.
+
+## With `npm install` and `import` from `node_modules`
+
+You can add tween.js as an npm dependency:
+
+```bash
+npm install @tweenjs/tween.js
+```
+
+### Without a build tool
+
+#### Installed locally
+
+You can import from `node_modules` if you serve `node_modules` as part of your
+website, using a standard `importmap` script tag. First, assuming `node_modules`
+is at the root of your website, you can write an import map like so in your HTML
+file:
+
+```html
+<script type="importmap">
+	{
+		"imports": {
+			"@tweenjs/tween.js": "/node_modules/@tweenjs/tween.js/dist/tween.esm.js"
+		}
+	}
+</script>
+```
+
+Now in any of your module scripts you can import Tween.js by its package name:
+
+```html
+<script type="module">
+	import {Tween} from '@tweenjs/tween.js'
+</script>
+```
+
+#### Import from CDN
+
+Note that, without the `importmap`, you can import directly from a CDN as with the first example above, like so:
+
+```html
+<script type="module">
+	import {Tween} from 'https://unpkg.com/browse/@tweenjs/tween.js@23.1.3/dist/tween.esm.js'
+</script>
+```
+
+You can also link your `importmap` to the CDN instead of a local `node_modules` folder, if you prefer that:
+
+```html
+<script type="importmap">
+	{
+		"imports": {
+			"@tweenjs/tween.js": "https://unpkg.com/browse/@tweenjs/tween.js@23.1.3/dist/tween.esm.js"
+		}
+	}
+</script>
+
+<script type="module">
+	import {Tween} from '@tweenjs/tween.js'
+</script>
+```
+
+### With a build tool
+
+If you are using [Node.js](https://nodejs.org/),
+[Parcel](https://parceljs.org/), [Webpack](https://webpack.js.org/),
+[Rollup](https://rollupjs.org/), [Vite](https://vitejs.dev/), or another build
+tool, then you can install `@tweenjs/tween.js` with `npm install
+@tweenjs/tween.js`, and `import` the library into your JavaScript (or
+TypeScript) file, and the build tool will know how to find the source code from
+`node_modules` without needing to create an `importmap` script:
+
+```javascript
+import * as TWEEN from '@tweenjs/tween.js'
+```
+
+However, note that this approach requires always running a build tool for your
+app to work, while the `importmap` approach will simply work without any build
+tools as a simple static HTML site.
+
+## Manual build
+
+Another approach is to download the source code with git, manually build the
+library, then place the output in your project. Node.js is required for this.
+
+```bash
+git clone https://github.com/tweenjs/tween.js
+cd tween.js
+npm install
+npm run build
+```
+
+This will create some builds in the `dist` directory. There are currently two different builds of the library:
+
+- ES6 Module in `/dist/tween.esm.js` (recommended)
+- UMD in `/dist/tween.umd.js` (deprecated, will be removed in a future major version)
+
+You are now able to copy one of those two files into your project, and use like this (recommended):
+
+```html
+<script type="module">
+	import {Tween} from 'path/to/tween.esm.js'
+</script>
+```
+
+or (deprecated, to be removed in future major):
+
+```html
+<script src="path/to/tween.umd.js"></script>
+<script>
+	const {Tween} = TWEEN
+</script>
+```
+
+where `path/to` is replaced with the location where you placed the file.
+
+> [!Note]
+> You can also download these files from unpkg, for example here:
+> https://unpkg.com/browse/@tweenjs/tween.js@23.1.3/dist/
+
+## Global variable from CDN (deprecated)
+
+> [!Note]
+> This method is deprecated and will be removed in a future major version!
+
+Install a global `TWEEN` variable from a content-delivery network (CDN) using the UMD file.
+
+From cdnjs:
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/23.1.3/tween.umd.js"></script>
+```
+
+Or from unpkg.com:
+
+```html
+<script src="https://unpkg.com/@tweenjs/tween.js@^23.1.3/dist/tween.umd.js"></script>
+```
+
+Then use the `TWEEN` variable in any script:
+
+```html
+<script>
+	const {Tween, Easing, Group /*, ...*/} = TWEEN
+
+	const tween = new Tween(someObject)
+	// ...
+</script>
+```
+
+> [!Note]
+> unpkg.com supports a semver version in the URL, where the `^` in the
+> URL tells unpkg to give you the latest version 20.x.x.
+
+## CommonJS (deprecated)
+
+Skip this section if you don't know what CommonJS is!
+
+> [!Note]
+> This method is deprecated and will be removed in a future major version!
+
+Any of the above methods work in older systems that still use CommonJS. Repeat
+any of the above methods but using `dist/tween.cjs` instead of
+`dist/tween.esm.js` or `dist/tween.umd.js`.
+
+# Documentation
+
+- [User guide](./docs/user_guide.md)
+- [Contributor guide](./docs/contributor_guide.md)
+- [Tutorial](https://web.archive.org/web/20220601192930/http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/) using tween.js with three.js
+- Also: [libtween](https://github.com/jsm174/libtween), a port of tween.js to C by [jsm174](https://github.com/jsm174)
+
 # Tests
 
 You need to install `npm` first--this comes with node.js, so install that one first. Then, cd to `tween.js`'s (or wherever you cloned the repo) directory and run:
@@ -364,7 +448,11 @@ To run the tests run:
 npm test
 ```
 
-If you want to add any feature or change existing features, you _must_ run the tests to make sure you didn't break anything else. Any pull request (PR) needs to have updated passing tests for feature changes (or new passing tests for new features or fixes) in `src/tests.ts` a PR to be accepted. See [contributing](CONTRIBUTING.md) for more information.
+If you want to add any feature or change existing features, you _must_ run the
+tests to make sure you didn't break anything else. Any pull request (PR) needs
+to have updated passing tests for feature changes (or new passing tests for new
+features or fixes) in `src/tests.ts` to be accepted. See
+[contributing](CONTRIBUTING.md) for more information.
 
 # People
 
diff --git a/README_zh-CN.md b/README_zh-CN.md
index 5d1cd077..a2f8d782 100644
--- a/README_zh-CN.md
+++ b/README_zh-CN.md
@@ -12,7 +12,7 @@
 ---
 
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/23.1.3/tween.umd.js"></script>
 
 <div id="box"></div>
 
@@ -59,13 +59,13 @@
 cdnjs:
 
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/23.1.3/tween.umd.js"></script>
 ```
 
 或者 unpkg.com:
 
 ```html
-<script src="https://unpkg.com/@tweenjs/tween.js@^20.0.0/dist/tween.umd.js"></script>
+<script src="https://unpkg.com/@tweenjs/tween.js@^23.1.3/dist/tween.umd.js"></script>
 ```
 
 请注意，unpkg.com 支持 URL 中的 semver 版本，其中 URL 中的 `^` 告诉 unpkg 为你提供最新版本 20.x.x。
@@ -84,7 +84,7 @@ npm run build
 这将在 `dist` 目录中创建一些构建。 目前有两种不同的库版本：
 
 - UMD : `tween.umd.js`
-- ES6 Module : `tween.es.js`
+- ES6 Module : `tween.esm.js`
 
 你现在可以将 tween.umd.js 复制到你的项目中，然后将其包含在一个 script 标签，它将 TWEEN 添加到全局范围，
 
@@ -96,7 +96,7 @@ npm run build
 
 ```html
 <script type="module">
-	import * as TWEEN from 'path/to/tween.es.js'
+	import * as TWEEN from 'path/to/tween.esm.js'
 </script>
 ```
 
@@ -126,7 +126,7 @@ import * as TWEEN from '@tweenjs/tween.js'
 <script type="importmap">
 	{
 		"imports": {
-			"@tweenjs/tween.js": "/node_modules/@tweenjs/tween.js/dist/tween.es.js"
+			"@tweenjs/tween.js": "/node_modules/@tweenjs/tween.js/dist/tween.esm.js"
 		}
 	}
 </script>
diff --git a/dist/tween.amd.js b/dist/tween.amd.js
index 3fcdafba..6ef77a17 100644
--- a/dist/tween.amd.js
+++ b/dist/tween.amd.js
@@ -225,33 +225,61 @@ define(['exports'], (function (exports) { 'use strict';
      */
     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.
@@ -262,13 +290,11 @@ define(['exports'], (function (exports) { 'use strict';
                 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;
     }());
@@ -377,10 +403,7 @@ define(['exports'], (function (exports) { 'use strict';
      * 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 = {};
@@ -405,6 +428,16 @@ define(['exports'], (function (exports) { 'use strict';
             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;
@@ -443,8 +476,6 @@ define(['exports'], (function (exports) { 'use strict';
             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
@@ -561,8 +592,6 @@ define(['exports'], (function (exports) { 'use strict';
             if (!this._isPlaying) {
                 return this;
             }
-            // eslint-disable-next-line
-            this._group && this._group.remove(this);
             this._isPlaying = false;
             this._isPaused = false;
             if (this._onStopCallback) {
@@ -582,8 +611,6 @@ define(['exports'], (function (exports) { 'use strict';
             }
             this._isPaused = true;
             this._pauseStart = time;
-            // eslint-disable-next-line
-            this._group && this._group.remove(this);
             return this;
         };
         Tween.prototype.resume = function (time) {
@@ -594,8 +621,6 @@ define(['exports'], (function (exports) { 'use strict';
             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 () {
@@ -605,8 +630,19 @@ define(['exports'], (function (exports) { 'use strict';
             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) {
@@ -685,12 +721,11 @@ define(['exports'], (function (exports) { 'use strict';
             if (this._isPaused)
                 return true;
             var property;
-            var endTime = this._startTime + this._duration;
             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) {
@@ -854,10 +889,245 @@ define(['exports'], (function (exports) { 'use strict';
     // 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,
@@ -868,10 +1138,245 @@ define(['exports'], (function (exports) { 'use strict';
         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,
     };
 
diff --git a/dist/tween.cjs b/dist/tween.cjs
index 5133e646..7143837e 100644
--- a/dist/tween.cjs
+++ b/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) {
@@ -687,12 +723,11 @@ var Tween = /** @class */ (function () {
         if (this._isPaused)
             return true;
         var property;
-        var endTime = this._startTime + this._duration;
         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) {
@@ -856,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,
@@ -870,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,
 };
 
diff --git a/dist/tween.d.ts b/dist/tween.d.ts
index 76e29eb1..66185d64 100644
--- a/dist/tween.d.ts
+++ b/dist/tween.d.ts
@@ -43,22 +43,6 @@ declare const Interpolation: {
     };
 };
 
-/**
- * Controlling groups of tweens
- *
- * Using the TWEEN singleton to manage your tweens can cause issues in large apps with many components.
- * In these cases, you may want to create your own smaller groups of tween
- */
-declare class Group {
-    private _tweens;
-    private _tweensAddedDuringUpdate;
-    getAll(): Array<Tween<UnknownProps>>;
-    removeAll(): void;
-    add(tween: Tween<UnknownProps>): void;
-    remove(tween: Tween<UnknownProps>): void;
-    update(time?: number, preserve?: boolean): boolean;
-}
-
 /**
  * Tween.js - Licensed under the MIT license
  * https://github.com/tweenjs/tween.js
@@ -68,9 +52,7 @@ declare class Group {
  * Thank you all, you're awesome!
  */
 
-declare class Tween<T extends UnknownProps> {
-    private _object;
-    private _group;
+declare class Tween<T extends UnknownProps = any> {
     private _isPaused;
     private _pauseStart;
     private _valuesStart;
@@ -100,7 +82,20 @@ declare class Tween<T extends UnknownProps> {
     private _id;
     private _isChainStopped;
     private _propertiesAreSetUp;
-    constructor(_object: T, _group?: Group | false);
+    private _object;
+    private _group?;
+    /**
+     * @param object - The object whose properties this Tween will animate.
+     * @param group - The object whose properties this Tween will animate.
+     */
+    constructor(object: T, group?: Group);
+    /**
+     * @deprecated The group parameter is now deprecated, instead use `new
+     * Tween(object)` then `group.add(tween)` to add a tween to a group. Use
+     * `new Tween(object, true)` to restore the old behavior for now, but this
+     * will be removed in the future.
+     */
+    constructor(object: T, group: true);
     getId(): number;
     isPlaying(): boolean;
     isPaused(): boolean;
@@ -116,7 +111,20 @@ declare class Tween<T extends UnknownProps> {
     pause(time?: number): this;
     resume(time?: number): this;
     stopChainedTweens(): this;
-    group(group?: Group): this;
+    /**
+     * Removes the tween from the current group it is in, if any, then adds the
+     * tween to the specified `group`.
+     */
+    group(group: Group): this;
+    /**
+     * @deprecated The argless call signature has been removed. Use
+     * `tween.group(group)` or `group.add(tween)`, instead.
+     */
+    group(): this;
+    /**
+     * Removes the tween from whichever group it is in.
+     */
+    remove(): this;
     delay(amount?: number): this;
     repeat(times?: number): this;
     repeatDelay(amount?: number): this;
@@ -143,6 +151,33 @@ declare class Tween<T extends UnknownProps> {
 }
 type UnknownProps = Record<string, any>;
 
+/**
+ * Controlling groups of tweens
+ *
+ * Using the TWEEN singleton to manage your tweens can cause issues in large apps with many components.
+ * In these cases, you may want to create your own smaller groups of tween
+ */
+declare class Group {
+    private _tweens;
+    private _tweensAddedDuringUpdate;
+    constructor(...tweens: Tween[]);
+    getAll(): Array<Tween>;
+    removeAll(): void;
+    add(...tweens: Tween[]): void;
+    remove(...tweens: Tween[]): void;
+    /** Return true if all tweens in the group are not paused or playing. */
+    allStopped(): boolean;
+    update(time?: number): void;
+    /**
+     * @deprecated The `preserve` parameter is now defaulted to `true` and will
+     * be removed in a future major release, at which point all tweens of a
+     * group will always be preserved when calling update. To migrate, always
+     * use `group.add(tween)` or `group.remove(tween)` to manually add or remove
+     * tweens, and do not rely on tweens being automatically added or removed.
+     */
+    update(time?: number, preserve?: boolean): void;
+}
+
 declare const now: () => number;
 
 /**
@@ -156,11 +191,249 @@ declare class Sequence {
 declare const VERSION = "23.1.3";
 
 declare const nextId: typeof Sequence.nextId;
-declare const getAll: () => Tween<UnknownProps>[];
+/**
+ * @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)
+ * })
+ * ```
+ */
+declare const getAll: () => Tween<any>[];
+/**
+ * @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)
+ * })
+ * ```
+ */
 declare const removeAll: () => void;
-declare const add: (tween: Tween<UnknownProps>) => void;
-declare const remove: (tween: Tween<UnknownProps>) => void;
-declare const update: (time?: number, preserve?: boolean) => boolean;
+/**
+ * @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)
+ * })
+ * ```
+ */
+declare const add: (...tweens: Tween<any>[]) => void;
+/**
+ * @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)
+ * })
+ * ```
+ */
+declare const remove: (...tweens: Tween<any>[]) => void;
+/**
+ * @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)
+ * })
+ * ```
+ */
+declare const update: {
+    (time?: number | undefined): void;
+    (time?: number | undefined, preserve?: boolean | undefined): void;
+};
 
 declare const exports: {
     Easing: Readonly<{
@@ -196,11 +469,249 @@ declare const exports: {
     nextId: typeof Sequence.nextId;
     Tween: typeof Tween;
     VERSION: string;
-    getAll: () => Tween<UnknownProps>[];
+    /**
+     * @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: () => Tween<any>[];
+    /**
+     * @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: () => void;
-    add: (tween: Tween<UnknownProps>) => void;
-    remove: (tween: Tween<UnknownProps>) => void;
-    update: (time?: number, preserve?: boolean) => boolean;
+    /**
+     * @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: (...tweens: Tween<any>[]) => void;
+    /**
+     * @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: (...tweens: Tween<any>[]) => void;
+    /**
+     * @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: {
+        (time?: number | undefined): void;
+        (time?: number | undefined, preserve?: boolean | undefined): void;
+    };
 };
 
 export { Easing, Group, Interpolation, Sequence, Tween, VERSION, add, exports as default, getAll, nextId, now, remove, removeAll, update };
diff --git a/dist/tween.esm.js b/dist/tween.esm.js
index 1ec97cab..6807f891 100644
--- a/dist/tween.esm.js
+++ b/dist/tween.esm.js
@@ -223,33 +223,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.
@@ -260,13 +288,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;
 }());
@@ -375,10 +401,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 = {};
@@ -403,6 +426,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;
@@ -441,8 +474,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
@@ -559,8 +590,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) {
@@ -580,8 +609,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) {
@@ -592,8 +619,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 () {
@@ -603,8 +628,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) {
@@ -683,12 +719,11 @@ var Tween = /** @class */ (function () {
         if (this._isPaused)
             return true;
         var property;
-        var endTime = this._startTime + this._duration;
         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) {
@@ -852,10 +887,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 = {
     Easing: Easing,
@@ -866,10 +1136,245 @@ var exports = {
     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,
 };
 
diff --git a/dist/tween.umd.js b/dist/tween.umd.js
index bffcc54d..98027a7a 100644
--- a/dist/tween.umd.js
+++ b/dist/tween.umd.js
@@ -229,33 +229,61 @@
      */
     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.
@@ -266,13 +294,11 @@
                 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;
     }());
@@ -381,10 +407,7 @@
      * 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 = {};
@@ -409,6 +432,16 @@
             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;
@@ -447,8 +480,6 @@
             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
@@ -565,8 +596,6 @@
             if (!this._isPlaying) {
                 return this;
             }
-            // eslint-disable-next-line
-            this._group && this._group.remove(this);
             this._isPlaying = false;
             this._isPaused = false;
             if (this._onStopCallback) {
@@ -586,8 +615,6 @@
             }
             this._isPaused = true;
             this._pauseStart = time;
-            // eslint-disable-next-line
-            this._group && this._group.remove(this);
             return this;
         };
         Tween.prototype.resume = function (time) {
@@ -598,8 +625,6 @@
             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 () {
@@ -609,8 +634,19 @@
             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) {
@@ -689,12 +725,11 @@
             if (this._isPaused)
                 return true;
             var property;
-            var endTime = this._startTime + this._duration;
             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) {
@@ -858,10 +893,245 @@
     // 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,
@@ -872,10 +1142,245 @@
         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,
     };
 
diff --git a/docs/user_guide.md b/docs/user_guide.md
index 4f2061c5..999813aa 100644
--- a/docs/user_guide.md
+++ b/docs/user_guide.md
@@ -6,17 +6,21 @@ _**NOTE** This is a work in progress. If you find that something is unclear or m
 
 ## What is a tween? How do they work? Why do you want to use them?
 
-A tween (from [_in-between_](http://en.wikipedia.org/wiki/Inbetweening)) is a concept that allows you to change the values of the properties of an object in a smooth way. You just tell it which properties you want to change, which final values should they have when the tween finishes running, and how long should this take, and the tweening engine will take care of finding the intermediate values from the starting to the ending point. For example, suppose you have a `position` object with `x` and `y` coordinates:
+A tween (from [_in-between_](http://en.wikipedia.org/wiki/Inbetweening)) is a concept that allows you to change the values of the properties of an object in a smooth way. You just tell it which properties you want to change, which final values should they have when the tween finishes running, and how long should this take, and the tweening engine will take care of finding the intermediate values from the starting to the ending point.
+
+For example, suppose you have a `position` object with `x` and `y` coordinates:
 
 ```javascript
-var position = {x: 100, y: 0}
+const position = {x: 100, y: 0}
 ```
 
 If you wanted to change the `x` value from `100` to `200`, you'd do this:
 
 ```javascript
+import {Tween} from '@tweenjs/tween.js'
+
 // Create a tween for position first
-var tween = new TWEEN.Tween(position)
+const tween = new Tween(position)
 
 // Then tell the tween we want to animate the x property over 1000 milliseconds
 tween.to({x: 200}, 1000)
@@ -29,7 +33,7 @@ Actually this won't do anything yet. The tween has been created but it's not act
 tween.start()
 ```
 
-Finally in order to run as smoothly as possible you should call the `TWEEN.update` function in the same main loop you're using for animating. This generally looks like this:
+Finally in order to run as smoothly as possible you should call the `tween.update()` function in the same main loop you're using for animating. This generally looks like this:
 
 ```javascript
 animate()
@@ -37,12 +41,12 @@ animate()
 function animate() {
 	requestAnimationFrame(animate)
 	// [...]
-	TWEEN.update()
+	tween.update()
 	// [...]
 }
 ```
 
-This will take care of updating all active tweens; after 1 second (i.e. 1000 milliseconds) `position.x` will be `200`.
+After 1 second (i.e. 1000 milliseconds) `position.x` will be `200`.
 
 But unless you print the value of `x` to the console, you can't see its value changing. You might want to use the `onUpdate` callback:
 
@@ -57,13 +61,13 @@ This function will be called each time the tween is updated; how often this happ
 So far we've only used tweens to print values to the console, but you could use it for things such as animating positions of three.js objects:
 
 ```javascript
-var tween = new TWEEN.Tween(cube.position).to({x: 100, y: 100, z: 100}, 10000).start()
+const tween = new Tween(cube.position).to({x: 100, y: 100, z: 100}, 10000).start()
 
 animate()
 
 function animate() {
 	requestAnimationFrame(animate)
-	TWEEN.update()
+	tween.update()
 
 	threeRenderer.render(scene, camera)
 }
@@ -74,7 +78,7 @@ In this case, because the three.js renderer will look at the object's position b
 You might have noticed something different here too: we're chaining the tween function calls! Each tween function returns the tween instance, so you can rewrite the following code:
 
 ```javascript
-var tween = new TWEEN.Tween(position)
+const tween = new Tween(position)
 tween.to({x: 200}, 1000)
 tween.start()
 ```
@@ -82,14 +86,14 @@ tween.start()
 into this
 
 ```javascript
-var tween = new TWEEN.Tween(position).to({x: 200}, 1000).start()
+const tween = new Tween(position).to({x: 200}, 1000).start()
 ```
 
 You'll see this a lot in the examples, so it's good to be familiar with it! Check [04-simplest](../examples/04_simplest.html) for a working example.
 
 ## Animating with tween.js
 
-Tween.js doesn't run by itself. You need to tell it when to run, by explicitly calling the `update` method. The recommended method is to do this inside your main animation loop, which should be called with `requestAnimationFrame` for getting the best graphics performance:
+Tween.js doesn't run by itself. You need to tell it when to run, by explicitly calling the `update` method of each tween, or the `update` method of a `Group` that has multiple tweens (more on Groups below). The recommended method is to do this inside your main animation loop, which should be called with `requestAnimationFrame` for getting the best graphics performance:
 
 We've seen this example before:
 
@@ -99,7 +103,7 @@ animate()
 function animate() {
 	requestAnimationFrame(animate)
 	// [...]
-	TWEEN.update()
+	tween.update()
 	// [...]
 }
 ```
@@ -109,17 +113,17 @@ If called without parameters, `update` will determine the current time in order
 However you can also pass an explicit time parameter to `update`. Thus,
 
 ```javascript
-TWEEN.update(100)
+tween.update(100)
 ```
 
 means "update with time = 100 milliseconds". You can use this to make sure that all the time-dependent functions in your code are using the very same time value. For example, suppose you've got a player and want to run tweens in sync. Your `animate` code could look like this:
 
 ```javascript
-var currentTime = player.currentTime
-TWEEN.update(currentTime)
+let currentTime = player.currentTime
+tween.update(currentTime)
 ```
 
-We use explicit time values for the unit tests. You can have a look at [tests.ts](../src/tests.ts) to see how we call TWEEN.update() with different values in order to simulate time passing.
+We use explicit time values for the unit tests. You can have a look at [tests.ts](../src/tests.ts) to see how we call `tween.update()` with different values in order to simulate time passing.
 
 ## Controlling a tween
 
@@ -127,13 +131,13 @@ We use explicit time values for the unit tests. You can have a look at [tests.ts
 
 So far we've learnt about the `Tween.start` method, but there are more methods that control individual tweens. Probably the most important one is the `start` counterpart: `stop`. If you want to cancel a tween, just call this method over an individual tween:
 
-```
-tween.stop();
+```js
+tween.stop()
 ```
 
 Stopping a tween that was never started or that has already been stopped has no effect. No errors are thrown either.
 
-The `start` method also accepts a `time` argument. If you use it, the tween won't start until that particular moment in time; otherwise it will start as soon as possible (i.e. on the next call to `TWEEN.update`).
+The `start` method also accepts a `time` argument. If you use it, the tween won't start until that particular moment in time; otherwise it will start as soon as possible (i.e. on the next call to `tween.update()`).
 
 The `start` method accepts a second boolean argument: when `true`, a tween that we previously used will start from the values in the target object, instead of starting from the beginning. Useful for stopping a tween, then starting another one that will continue from the current location.
 
@@ -145,12 +149,10 @@ beginning.
 
 ### `update`
 
-Individual tweens have an `update` method. This is in fact called by `TWEEN.update` for tweens that have been constructed with only one argument.
-
-In the following example, the second argument tells the new Tween not to add itself to the default group (`TWEEN` is an instance of `TWEEN.Group`). If the tween is not associated with a group (note that a group can be associated by passing it in as the second arg to the constructor), then the tween needs to be updated manually using its `updated` method like so:
+Individual tweens have an `update` method to so that they can be updated over time in an animation loop, and on each update they will apply updated values to their target object.
 
 ```js
-const tween = new TWEEN.Tween(someObject, false).to(/*...*/).start()
+const tween = new Tween(someObject).to(/*...*/).start()
 
 function animate(time) {
 	tween.update(time)
@@ -158,9 +160,27 @@ function animate(time) {
 }
 ```
 
-> **Note** You don't need to call `tween.update()` directly if you're using `TWEEN.update()` as a way to control all tweens by default, however we recommend that you either [make your own groups of tweens](#controlling-groups-of-tweens) or manually update your tweens directly as in the last example. The concept of using groups or individually-controlled tweens is much like the practice of avoiding use of global variables in your JavaScript code: it prevents one component from accidentally ruining the behavior of some other unrelated component.
+### `pause`
+
+While an tween is running (i.e. it has already been `start`ed and may have
+already been `update`d numerous times) it can be paused. Even if `update()` is
+called while the tween is paused, its time will not move forward. `isPlaying`
+will still be true while a tween is `paused` and its `update()` method continues
+to track time progression (you can continue to call `update()` while a tween is
+paused).
+
+```js
+tween.start()
+
+function animate() {
+	tween.update()
+	requestAnimationFrame(animate)
+}
+animate()
 
-Using `TWEEN` to control your tweens is like using globals: and it is only good for simple cases (f.e. small demos, prototypes, etc) but it may not scale well for big apps that may have different parts that need to animate tweens on differing schedules.
+// at any time while the tween is running
+tween.pause()
+```
 
 ### `chain`
 
@@ -243,76 +263,82 @@ See the other `dynamic to` examples for more ideas.
 
 > **Warning** When `dynamic` is set to `false`, Tween makes a copy of the object passed into `tween.to()` and will never modify it (hence updating the original object from the outside is not dynamic). When `dynamic` is `true`, Tween uses the original object as the source of values during animation (every update reads the values, hence they can be modified dynamically) but note that **in dynamic mode, Tween will modify any interpolation arrays of the object passed into `tween.to()` which may cause side-effects on any external code that may also rely on the same object**.
 
-## Controlling _all_ the tweens
-
-The following methods are found in the TWEEN global object, and you generally won't need to use most of them, except for `update`. `TWEEN` is effectively an instance of `TWEEN.Group`, and by default all new Tweens are associated to this global `Group` unless otherwise specified (see the next section on grouping tweens with your own Groups).
-
-### `TWEEN.update(time)`
-
-We've already talked about this method. It is used to update all the active tweens.
+## Controlling groups of tweens
 
-If `time` is not specified, it will use the current time.
+Sometimes you want to update multiple tweens at once, which can be useful when
+grouping a set of tweens into a logical component in your application. You can
+do this with a `Group`.
 
-### `TWEEN.getAll` and `TWEEN.removeAll`
+First add multiple tweens to a group:
 
-Used to get a reference to the active `tweens` array and to remove all of them from the array with just one call, respectively.
+```js
+import {Group, Tween} from '@tweenjs/tween.js'
 
-### `TWEEN.add(tween)` and `TWEEN.remove(tween)`
+const tween1 = new Tween(obj1).to(...).start()
+const tween2 = new Tween(obj2).to(...).start()
 
-Used to add a tween to the list of active tweens, or to remove a specific one from the list, respectively.
+const group = new Group()
+group.add(tween1)
+group.add(tween2)
+```
 
-These methods are usually used internally only, but are exposed just in case you want to do something _funny_.
+Then call `group.update()` in your animation loop instead of on individual
+tweens:
 
-## Controlling groups of tweens
+```js
+animate()
 
-Using the `TWEEN` singleton to manage your tweens can cause issues in large apps with many components. In these cases, you may want to create your own smaller groups of tweens.
+function animate() {
+	requestAnimationFrame(animate)
+	// [...]
+	group.update()
+	// [...]
+}
+```
 
-#### Example: cross-component conflict
+Note that a tween can only belong to a single group. Adding a tween to a group
+automatically removes it from any previous group.
 
-A conflict can occur if you have multiple components using `TWEEN`, and each component wants to manage its own set of tweens. If one component calls `TWEEN.update()` or `TWEEN.removeAll()` the tweens of other components will also be updated or removed.
+### `group.getAll()`
 
-#### Creating your own tween groups
+Returns an array of all tweens added to a group.
 
-To solve this, each component can make their own instance of `TWEEN.Group` (which is what the global `TWEEN` object uses internally). These groups can be passed in as a second optional parameter when instantiating a new tween:
+### `group.add(tween)`
 
-```javascript
-var groupA = new TWEEN.Group()
-var groupB = new TWEEN.Group()
+Add a tween to a group.
 
-var tweenA = new TWEEN.Tween({x: 1}, groupA).to({x: 10}, 100).start()
+### `group.remove(tween)`
 
-var tweenB = new TWEEN.Tween({x: 1}, groupB).to({x: 10}, 100).start()
+Remove a tween from a group.
 
-var tweenC = new TWEEN.Tween({x: 1}).to({x: 10}, 100).start()
+### `group.removeAll()`
 
-groupA.update() // only updates tweenA
-groupB.update() // only updates tweenB
-TWEEN.update() // only updates tweenC
+Remove all tween from a group.
 
-groupA.removeAll() // only removes tweenA
-groupB.removeAll() // only removes tweenB
-TWEEN.removeAll() // only removes tweenC
-```
+### `group.update(time?)`
 
-In this way, each component can handle creating, updating, and destroying its own set of tweens.
+Update all tweens in a group, with an optional time value. If time value is not
+supplied, it default to the current time.
 
 ## Changing the easing function (AKA make it bouncy)
 
 Tween.js will perform the interpolation between values (i.e. the easing) in a linear manner, so the change will be directly proportional to the elapsed time. This is predictable but also quite uninteresting visually wise. Worry not--this behaviour can be easily changed using the `easing` method. For example:
 
 ```javascript
-tween.easing(TWEEN.Easing.Quadratic.In)
+import {Tween, Easing} from '@tweenjs/tween.js'
+// ...
+tween.easing(Easing.Quadratic.In)
 ```
 
-This will result in the tween slowly starting to change towards the final value, accelerating towards the middle, and then quickly reaching its final value. In contrast, `TWEEN.Easing.Quadratic.Out` would start changing quickly towards the value, but then slow down as it approaches the final value.
+This will result in the tween slowly starting to change towards the final value, accelerating towards the middle, and then quickly reaching its final value. In contrast, `Easing.Quadratic.Out` would start changing quickly towards the value, but then slow down as it approaches the final value.
 
-### Available easing functions: `TWEEN.Easing`
+### Available `Easing` functions
 
 There are a few existing easing functions provided with tween.js. They are grouped by the type of equation they represent: Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back and Bounce, and then by the easing type: In, Out and InOut.
 
 Probably the names won't be saying anything to you unless you're familiar with these concepts already, so it is probably the time to check the [Graphs](../examples/03_graphs.html) example, which graphs all the curves in one page so you can compare how they look at a glance.
 
-TWEEN.Easing also has a function called generatePow(). This function generates easing functions for different curves depending on arguments. You can check the relevance of the arguments to curves in the [example of pow easing](../examples/17_generate_pow.html) page.
+`Easing` also has a function called `generatePow()`. This function generates easing functions for different curves depending on arguments. You can check the relevance of the arguments to curves in the [example of pow easing](../examples/17_generate_pow.html) page.
 
 _Credit where credit is due:_ these functions are derived from the original set of equations that Robert Penner graciously made available as free software a few years ago, but have been optimised to play nicely with JavaScript.
 
@@ -357,7 +383,7 @@ Another powerful feature is to be able to run your own functions at specific tim
 For example, suppose you're trying to animate some object whose properties can't be accessed directly but require you to call a setter instead. You can use an `update` callback to read the new updated values and then manually call the setters. All callbacks are passed the tweened object as the only parameter.
 
 ```javascript
-var trickyObjTween = new TWEEN.Tween({
+const trickyObjTween = new Tween({
 	propertyA: trickyObj.getPropertyA(),
 	propertyB: trickyObj.getPropertyB(),
 })
@@ -371,7 +397,7 @@ var trickyObjTween = new TWEEN.Tween({
 Or imagine you want to play a sound when a tween is started. You can use a `start` callback:
 
 ```javascript
-var tween = new TWEEN.Tween(obj).to({x: 100}).onStart(function () {
+const tween = new Tween(obj).to({x: 100}).onStart(function () {
 	sound.play()
 })
 ```
@@ -421,7 +447,7 @@ To clarify when `onStart`, `onEveryStart` and `onRepeat` are called, consider:
 ```javascript
 const obj = {x: 0}
 
-const t = new TWEEN.Tween(obj)
+const t = new Tween(obj)
 	.to({x: 5}, 5)
 	.repeat(Infinity)
 	.onStart(() => {
@@ -437,7 +463,7 @@ const t = new TWEEN.Tween(obj)
 
 for (let ticks = 0; ticks < 22; ticks += 1) {
 	console.log('Tick', ticks)
-	TWEEN.update(ticks)
+	t.update(ticks)
 
 	console.log(obj)
 	console.log()
@@ -529,13 +555,13 @@ onEveryStart     { x: 5 }
 
 ### `isPlaying`
 
-`true` when started (even if paused).
+`tween.isPlaying` is `true` when a tween is started, even if it is paused.
 
-When a tween is stopped, `isPlaying` and `isPaused` will both be `false`.
+When a tween is stopped, `isPlaying` and `isPaused` will both be `false`, so `!tween.isPlaying()` can be used to detect if a tween is stopped (regardless if the tween has completed).
 
 ### `isPaused`
 
-`true` when paused. `isPlaying` will also be `true`. If a tween is started, but not paused, `isPlaying` will be `true` and `isPaused` will be `false`.
+`tween.isPaused` is `true` when a tween is paused. `isPlaying` will also be `true`. If a tween is started, but not paused, `isPlaying` will be `true` and `isPaused` will be `false`.
 
 ## Advanced tweening
 
@@ -545,7 +571,7 @@ You can also use relative values when using the `to` method. When the tween is s
 
 ```javascript
 // This will make the `x` property be 100, always
-var absoluteTween = new TWEEN.Tween(absoluteObj).to({x: 100})
+const absoluteTween = new Tween(absoluteObj).to({x: 100})
 
 // Suppose absoluteObj.x is 0 now
 absoluteTween.start() // Makes x go to 100
@@ -557,7 +583,7 @@ absoluteTween.start() // Makes x go to 100
 
 // This will make the `x` property be 100 units more,
 // relative to the actual value when it starts
-var relativeTween = new TWEEN.Tween(relativeObj).to({x: '+100'})
+const relativeTween = new Tween(relativeObj).to({x: '+100'})
 
 // Suppose relativeObj.x is 0 now
 relativeTween.start() // Makes x go to 0 +100 = 100
@@ -573,8 +599,8 @@ Check [09_relative_values](../examples/09_relative_values.html) for an example.
 Tween.js can also change properties across nested objects. For example:
 
 ```javascript
-var nestedObject = {scale: {x: 0, y: 0}, alpha: 0}
-var tween = new TWEEN.Tween(nestedObject).to({scale: {x: 100, y: 100}, alpha: 1})
+const nestedObject = {scale: {x: 0, y: 0}, alpha: 0}
+const tween = new Tween(nestedObject).to({scale: {x: 100, y: 100}, alpha: 1})
 ```
 
 ### Tweening to arrays of values
@@ -582,7 +608,7 @@ var tween = new TWEEN.Tween(nestedObject).to({scale: {x: 100, y: 100}, alpha: 1}
 In addition to tweening to an absolute or a relative value, you can also have Tween.js change properties across a series of values. To do this, you just need to specify an array of values instead of a single value for a property. For example:
 
 ```javascript
-var tween = new TWEEN.Tween(relativeObj).to({x: [0, -100, 100]})
+const tween = new Tween(relativeObj).to({x: [0, -100, 100]})
 ```
 
 will make `x` go from its initial value to 0, -100 and 100.
@@ -595,17 +621,20 @@ The way these values are calculated is as follows:
 
 For example, when the tween has just started (progress is 0), the interpolation function will return the first value in the array. When the tween is halfway, the interpolation function will return a value approximately in the middle of the array, and when the tween is at the end, the interpolation function will return the last value.
 
-You can change the interpolation function with the `interpolation` method. For example:
+You can change the interpolation mode by passing an `Interpolation` function
+into the `tween.interpolation` method. For example:
 
 ```javascript
-tween.interpolation(TWEEN.Interpolation.Bezier)
+import {Interpolation} from '@tweenjs/tween.js'
+// ...
+tween.interpolation(Interpolation.Bezier)
 ```
 
 The following values are available:
 
-- TWEEN.Interpolation.Linear
-- TWEEN.Interpolation.Bezier
-- TWEEN.Interpolation.CatmullRom
+- `Interpolation.Linear`
+- `Interpolation.Bezier`
+- `Interpolation.CatmullRom`
 
 The default is `Linear`.
 
@@ -622,8 +651,8 @@ While Tween.js tries to be performant on its own, nothing prevents you from usin
 When you try to animate the position of an element in the page, the easiest solution is to animate the `top` and `left` style properties, like this:
 
 ```javascript
-var element = document.getElementById('myElement')
-var tween = new TWEEN.Tween({top: 0, left: 0}).to({top: 100, left: 100}, 1000).onUpdate(function (object) {
+const element = document.getElementById('myElement')
+const tween = new Tween({top: 0, left: 0}).to({top: 100, left: 100}, 1000).onUpdate(function (object) {
 	element.style.top = object.top + 'px'
 	element.style.left = object.left + 'px'
 })
@@ -632,8 +661,8 @@ var tween = new TWEEN.Tween({top: 0, left: 0}).to({top: 100, left: 100}, 1000).o
 but this is really inefficient because altering these properties forces the browser to recalculate the layout on each update, and this is a very costly operation. Instead of using these, you should use `transform`, which doesn't invalidate the layout and will also be hardware accelerated when possible, like this:
 
 ```javascript
-var element = document.getElementById('myElement')
-var tween = new TWEEN.Tween({top: 0, left: 0}).to({top: 100, left: 100}, 1000).onUpdate(function (object) {
+const element = document.getElementById('myElement')
+const tween = new Tween({top: 0, left: 0}).to({top: 100, left: 100}, 1000).onUpdate(function (object) {
 	element.style.transform = 'translate(' + object.left + 'px, ' + object.top + 'px)'
 })
 ```
diff --git a/docs/user_guide_zh-CN.md b/docs/user_guide_zh-CN.md
index 3e6e36e6..c15247d6 100644
--- a/docs/user_guide_zh-CN.md
+++ b/docs/user_guide_zh-CN.md
@@ -13,14 +13,14 @@ _**NOTE** 这是一个正在进行的工作。 如果你发现某些内容不清
 例如，`position` 对象拥有 `x` 和 `y` 两个坐标：
 
 ```js
-var position = {x: 100, y: 0}
+const position = {x: 100, y: 0}
 ```
 
 如果你想将 `x` 坐标的值从 `100` 变成 `200` ，你应该这么做：
 
 ```js
 // 首先为位置创建一个补间(tween)
-var tween = new TWEEN.Tween(position)
+const tween = new TWEEN.Tween(position)
 
 // 然后告诉 tween 我们想要在1000毫秒内以动画的形式移动 x 的位置
 tween.to({x: 200}, 1000)
@@ -61,7 +61,7 @@ tween.onUpdate(function (object) {
 到目前为止，我们只使用 tweens 将值打印到控制台，但你可以将它用于 three.js 对象的动画位置之类的事情：
 
 ```js
-var tween = new TWEEN.Tween(cube.position).to({x: 100, y: 100, z: 100}, 10000).start()
+const tween = new TWEEN.Tween(cube.position).to({x: 100, y: 100, z: 100}, 10000).start()
 
 animate()
 
@@ -78,7 +78,7 @@ function animate() {
 你可能也注意到了一些不同的地方：tween.js 可以链式调用！ 每个 tween 函数都会返回 tween 实例，所以你可以重写下面的代码：
 
 ```js
-var tween = new TWEEN.Tween(position)
+const tween = new TWEEN.Tween(position)
 tween.to({x: 200}, 1000)
 tween.start()
 ```
@@ -86,7 +86,7 @@ tween.start()
 改成这样：
 
 ```js
-var tween = new TWEEN.Tween(position).to({x: 200}, 1000).start()
+const tween = new TWEEN.Tween(position).to({x: 200}, 1000).start()
 ```
 
 在将会看到很多例子，所以熟悉它是很好的！比如 [04-simplest](../examples/04_simplest.html) 这个例子。
@@ -119,7 +119,7 @@ TWEEN.update(100)
 意思是“更新时间 = 100 毫秒”。你可以使用它来确保代码中的所有时间相关函数都使用相同的时间值。例如，假设你有一个播放器，并希望同步运行补间。 你的 `animate` 函数可能看起来像这样：
 
 ```js
-var currentTime = player.currentTime
+const currentTime = player.currentTime
 TWEEN.update(currentTime)
 ```
 
@@ -272,14 +272,14 @@ tween.start()
 为了解决这个问题，每个组件都可以创建自己的 `TWEEN.Group` 实例（这是全局 `TWEEN` 对象在内部使用的实例）。 在实例化新补间时，这些组可以作为第二个可选参数传入：
 
 ```js
-var groupA = new TWEEN.Group()
-var groupB = new TWEEN.Group()
+const groupA = new TWEEN.Group()
+const groupB = new TWEEN.Group()
 
-var tweenA = new TWEEN.Tween({x: 1}, groupA).to({x: 10}, 100).start()
+const tweenA = new TWEEN.Tween({x: 1}, groupA).to({x: 10}, 100).start()
 
-var tweenB = new TWEEN.Tween({x: 1}, groupB).to({x: 10}, 100).start()
+const tweenB = new TWEEN.Tween({x: 1}, groupB).to({x: 10}, 100).start()
 
-var tweenC = new TWEEN.Tween({x: 1}).to({x: 10}, 100).start()
+const tweenC = new TWEEN.Tween({x: 1}).to({x: 10}, 100).start()
 
 groupA.update() // 只更新tweenA
 groupB.update() // 只更新tweenB
@@ -351,7 +351,7 @@ tween.easing(tenStepEasing)
 例如，假设你正在试图给一些不能直接访问属性的对象设置动画，但是需要你调用 setter。 你可以使用 `update` 回调来读取新的更新值，然后手动调用 setters。 所有的回调函数都将补间对象作为唯一的参数。
 
 ```js
-var trickyObjTween = new TWEEN.Tween({
+const trickyObjTween = new TWEEN.Tween({
 	propertyA: trickyObj.getPropertyA(),
 	propertyB: trickyObj.getPropertyB(),
 })
@@ -365,7 +365,7 @@ var trickyObjTween = new TWEEN.Tween({
 或者假设你想在开始补间时播放声音。 你可以使用 `start` 回调：
 
 ```js
-var tween = new TWEEN.Tween(obj).to({x: 100}).onStart(function () {
+const tween = new TWEEN.Tween(obj).to({x: 100}).onStart(function () {
 	sound.play()
 })
 ```
@@ -540,7 +540,7 @@ onEveryStart     { x: 5 }
 
 ```js
 // 这将使 `x` 属性始终为 100
-var absoluteTween = new TWEEN.Tween(absoluteObj).to({x: 100})
+const absoluteTween = new TWEEN.Tween(absoluteObj).to({x: 100})
 
 // 假设 absoluteObj.x 现在为 0
 absoluteTween.start() // 使 x 变为 100
@@ -551,7 +551,7 @@ absoluteTween.start() // 使 x 变为 100
 // 相比之下...
 
 // 这将使 `x` 属性相对于开始时的实际值多 100 个单位
-var relativeTween = new TWEEN.Tween(relativeObj).to({x: '+100'})
+const relativeTween = new TWEEN.Tween(relativeObj).to({x: '+100'})
 
 // 假设 relativeObj.x 现在是 0
 relativeTween.start() // 使 x 变为 0 +100 = 100
@@ -567,8 +567,8 @@ relativeTween.start() // 使 x 变为 -100 +100 = 0
 Tween.js 还可以跨嵌套对象更改属性。 例如：
 
 ```js
-var nestedObject = {scale: {x: 0, y: 0}, alpha: 0}
-var tween = new TWEEN.Tween(nestedObject).to({scale: {x: 100, y: 100}, alpha: 1})
+const nestedObject = {scale: {x: 0, y: 0}, alpha: 0}
+const tween = new TWEEN.Tween(nestedObject).to({scale: {x: 100, y: 100}, alpha: 1})
 ```
 
 ### 补间值的数组
@@ -576,7 +576,7 @@ var tween = new TWEEN.Tween(nestedObject).to({scale: {x: 100, y: 100}, alpha: 1}
 除了补间到绝对值或相对值之外，你还可以让 Tween.js 更改一系列值的属性。 为此，你只需为属性指定一个值数组而不是单个值。 例如：
 
 ```js
-var tween = new TWEEN.Tween(relativeObj).to({x: [0, -100, 100]})
+const tween = new TWEEN.Tween(relativeObj).to({x: [0, -100, 100]})
 ```
 
 将使 `x` 从初始值变为 0，-100 和 100。
@@ -617,8 +617,8 @@ tween.interpolation(TWEEN.Interpolation.Bezier)
 当你尝试为页面中元素的位置设置动画时，最简单的解决方案是为 `top` 和 `left` 样式属性设置动画，如下所示：
 
 ```js
-var element = document.getElementById('myElement')
-var tween = new TWEEN.Tween({top: 0, left: 0}).to({top: 100, left: 100}, 1000).onUpdate(function (object) {
+const element = document.getElementById('myElement')
+const tween = new TWEEN.Tween({top: 0, left: 0}).to({top: 100, left: 100}, 1000).onUpdate(function (object) {
 	element.style.top = object.top + 'px'
 	element.style.left = object.left + 'px'
 })
@@ -627,8 +627,8 @@ var tween = new TWEEN.Tween({top: 0, left: 0}).to({top: 100, left: 100}, 1000).o
 但这确实效率低下，因为更改这些属性会强制浏览器在每次更新时重新计算布局，这是一项非常消耗性能的操作。你应该使用 `transform`，它不会使布局无效，并且在可能的情况下也会进行硬件加速，如下所示：
 
 ```js
-var element = document.getElementById('myElement')
-var tween = new TWEEN.Tween({top: 0, left: 0}).to({top: 100, left: 100}, 1000).onUpdate(function (object) {
+const element = document.getElementById('myElement')
+const tween = new TWEEN.Tween({top: 0, left: 0}).to({top: 100, left: 100}, 1000).onUpdate(function (object) {
 	element.style.transform = 'translate(' + object.left + 'px, ' + object.top + 'px);'
 })
 ```
diff --git a/examples/00_hello_world.html b/examples/00_hello_world.html
index 4a966fa2..6f19267e 100644
--- a/examples/00_hello_world.html
+++ b/examples/00_hello_world.html
@@ -25,36 +25,39 @@ <h2>00 _ hello world</h2>
 			hello world!
 		</div>
 
-		<script src="../dist/tween.umd.js"></script>
-		<script>
+		<script type="module">
+			import {Tween, Easing, Group} from '../dist/tween.esm.js'
+
 			const position = {x: 100, y: 100, rotation: 10}
 			const target = document.getElementById('target')
-			const tween = new TWEEN.Tween(position)
+			const tween = new Tween(position)
 				.to({x: 700, y: 200, rotation: 359}, 2000)
 				.delay(1000)
-				.easing(TWEEN.Easing.Elastic.InOut)
+				.easing(Easing.Elastic.InOut)
 				.onUpdate(update)
 
-			const tweenBack = new TWEEN.Tween(position)
+			const tweenBack = new Tween(position)
 				.to({x: 100, y: 100, rotation: 10}, 3000)
-				.easing(TWEEN.Easing.Elastic.InOut)
+				.easing(Easing.Elastic.InOut)
 				.onUpdate(update)
 
 			tween.chain(tweenBack)
-			tweenBack.chain(tween)
+			// tweenBack.chain(tween)
 
 			tween.start()
 
+			const group = new Group(tween, tweenBack)
+
 			animate(performance.now())
 
-			//If we register the callback animate, but the TWEEN.update(time) returns false,
-			//cancel/unregister the handler
 			function animate(time) {
-				var id = requestAnimationFrame(animate)
+				group.update(time)
 
-				var result = TWEEN.update(time)
+				// If the update method returns false, it means all tweens in
+				// the group are done playing, so we can stop the loop.
+				const keepGoing = !group.allStopped()
 
-				if (!result) cancelAnimationFrame(id)
+				if (keepGoing) requestAnimationFrame(animate)
 			}
 
 			function update() {
diff --git a/examples/01_bars.html b/examples/01_bars.html
index 25cd6c33..6481b1ed 100644
--- a/examples/01_bars.html
+++ b/examples/01_bars.html
@@ -13,67 +13,67 @@ <h2>01 _ Bars</h2>
 		</div>
 		<div id="target"></div>
 
-		<script src="../dist/tween.umd.js"></script>
 		<script src="js/stats.min.js"></script>
-		<script>
-			var stats
-			var elems = []
 
-			init()
-			animate()
+		<script type="module">
+			import * as TWEEN from '../dist/tween.esm.js'
+
+			const group = new TWEEN.Group()
+
+			const stats = new Stats()
+			const sds = stats.domElement.style
+			sds.position = 'absolute'
+			sds.right = '0px'
+			sds.top = '0px'
+			sds.margin = '4em 3em'
+			document.body.appendChild(stats.domElement)
+
+			for (let i = 0; i < 1000; i++) {
+				const startValue = 500 + (Math.random() - Math.random()) * 250
+				const endValue = 500 + (Math.random() - Math.random()) * 250
 
-			function init() {
-				stats = new Stats()
-				var sds = stats.domElement.style
-				sds.position = 'absolute'
-				sds.right = '0px'
-				sds.top = '0px'
-				sds.margin = '4em 3em'
-				document.body.appendChild(stats.domElement)
-
-				for (var i = 0; i < 1000; i++) {
-					var startValue = 500 + (Math.random() - Math.random()) * 250
-					var endValue = 500 + (Math.random() - Math.random()) * 250
-
-					var domElement = document.createElement('div')
-					var bg = (Math.random() * 0xffffff) >> 0
-					domElement.style.position = 'absolute'
-					const y = Math.random() * window.innerHeight
-					domElement.style.translate = startValue + 'px ' + y + 'px'
-					domElement.style.background = '#' + bg.toString(16)
-					domElement.style.width = '100px'
-					domElement.style.height = '2px'
-
-					var elem = {x: startValue, domElement: domElement, y}
-
-					var updateCallback = function (object) {
-						object.domElement.style.translate = object.x + 'px ' + object.y + 'px'
-					}
-
-					var tween = new TWEEN.Tween(elem)
-						.to({x: endValue}, 4000)
-						.delay(Math.random() * 1000)
-						.onUpdate(updateCallback)
-						.easing(TWEEN.Easing.Back.Out)
-						.start()
-
-					var tweenBack = new TWEEN.Tween(elem)
-						.to({x: startValue}, 4000)
-						.delay(Math.random() * 1000)
-						.onUpdate(updateCallback)
-						.easing(TWEEN.Easing.Elastic.InOut)
-
-					tween.chain(tweenBack)
-					tweenBack.chain(tween)
-
-					document.body.appendChild(elem.domElement)
+				const domElement = document.createElement('div')
+				const bg = (Math.random() * 0xffffff) >> 0
+				domElement.style.position = 'absolute'
+				const y = Math.random() * window.innerHeight
+				domElement.style.translate = startValue + 'px ' + y + 'px'
+				domElement.style.background = '#' + bg.toString(16)
+				domElement.style.width = '100px'
+				domElement.style.height = '2px'
+
+				const elem = {x: startValue, domElement: domElement, y}
+
+				const updateCallback = function (object) {
+					object.domElement.style.translate = object.x + 'px ' + object.y + 'px'
 				}
+
+				const tween = new TWEEN.Tween(elem)
+					.to({x: endValue}, 4000)
+					.delay(Math.random() * 1000)
+					.onUpdate(updateCallback)
+					.easing(TWEEN.Easing.Back.Out)
+					.start()
+
+				const tweenBack = new TWEEN.Tween(elem)
+					.to({x: startValue}, 4000)
+					.delay(Math.random() * 1000)
+					.onUpdate(updateCallback)
+					.easing(TWEEN.Easing.Elastic.InOut)
+
+				tween.chain(tweenBack)
+				tweenBack.chain(tween)
+
+				group.add(tween, tweenBack)
+
+				document.body.appendChild(elem.domElement)
 			}
 
+			animate()
+
 			function animate(time) {
 				requestAnimationFrame(animate)
 
-				TWEEN.update(time)
+				group.update(time)
 				stats.update()
 			}
 		</script>
diff --git a/examples/02_black_and_red.html b/examples/02_black_and_red.html
index cc6bb726..6fab5d59 100644
--- a/examples/02_black_and_red.html
+++ b/examples/02_black_and_red.html
@@ -32,62 +32,63 @@ <h2>02 _ Black and red</h2>
 			}
 		</style>
 
-		<script src="../dist/tween.umd.js"></script>
 		<script src="js/stats.min.js"></script>
-		<script>
-			var stats
 
-			init()
-			animate()
+		<script type="module">
+			import * as TWEEN from '../dist/tween.esm.js'
 
-			function init() {
-				var target = document.getElementById('target')
-				stats = new Stats()
-				target.appendChild(stats.domElement)
+			const group = new TWEEN.Group()
 
-				var t = document.createElement('table')
-				var index = 0
+			const target = document.getElementById('target')
+			const stats = new Stats()
+			target.appendChild(stats.domElement)
 
-				for (var i = 0; i < 64; i++) {
-					var tr = t.insertRow(-1)
-					for (var j = 0; j < 64; j++) {
-						var td = tr.insertCell(-1)
-						td.style.background = '#000'
-						var x = (i + j) * 0.1
-						var cell = {td: td, value: 0}
-						var tween = new TWEEN.Tween(cell)
-							.to({value: 1}, 8000)
-							.delay((0.001 * index + Math.random()) * 500)
-							.easing(TWEEN.Easing.Elastic.InOut)
-							.onUpdate(function (object) {
-								var c = Math.floor(object.value * 0xff)
-								object.td.style.background = 'rgb(' + c + ', 0, 0)'
-							})
+			const t = document.createElement('table')
+			let index = 0
 
-						var tweenBack = new TWEEN.Tween(cell)
-							.to({value: 0}, 4000)
-							.delay((0.001 * index + Math.random()) * 500)
-							.easing(TWEEN.Easing.Elastic.InOut)
-							.onUpdate(function (object) {
-								var c = Math.floor(object.value * 0xff)
-								object.td.style.background = 'rgb(' + c + ', 0, 0)'
-							})
+			for (let i = 0; i < 64; i++) {
+				const tr = t.insertRow(-1)
+				for (let j = 0; j < 64; j++) {
+					const td = tr.insertCell(-1)
+					td.style.background = '#000'
+					const x = (i + j) * 0.1
+					const cell = {td: td, value: 0}
+					const tween = new TWEEN.Tween(cell)
+						.to({value: 1}, 8000)
+						.delay((0.001 * index + Math.random()) * 500)
+						.easing(TWEEN.Easing.Elastic.InOut)
+						.onUpdate(function (object) {
+							const c = Math.floor(object.value * 0xff)
+							object.td.style.background = 'rgb(' + c + ', 0, 0)'
+						})
 
-						tween.chain(tweenBack)
-						tweenBack.chain(tween)
+					const tweenBack = new TWEEN.Tween(cell)
+						.to({value: 0}, 4000)
+						.delay((0.001 * index + Math.random()) * 500)
+						.easing(TWEEN.Easing.Elastic.InOut)
+						.onUpdate(function (object) {
+							const c = Math.floor(object.value * 0xff)
+							object.td.style.background = 'rgb(' + c + ', 0, 0)'
+						})
 
-						tween.start()
-						index++
-					}
-				}
+					tween.chain(tweenBack)
+					tweenBack.chain(tween)
 
-				target.appendChild(t)
+					group.add(tween, tweenBack)
+
+					tween.start()
+					index++
+				}
 			}
 
+			target.appendChild(t)
+
+			animate()
+
 			function animate(time) {
 				requestAnimationFrame(animate)
 
-				TWEEN.update(time)
+				group.update(time)
 				stats.update()
 			}
 		</script>
diff --git a/examples/03_graphs.html b/examples/03_graphs.html
index dadd44ad..5c75d52f 100644
--- a/examples/03_graphs.html
+++ b/examples/03_graphs.html
@@ -24,74 +24,77 @@ <h2>03 _ graphs</h2>
 
 		<div id="target"></div>
 
-		<script src="../dist/tween.umd.js"></script>
-		<script src="js/createGraph.js"></script>
-		<script>
+		<script type="module">
+			import {createGraph} from './js/createGraph.js'
+			import * as TWEEN from '../dist/tween.esm.js'
+
+			const group = new TWEEN.Group()
+
 			window.addEventListener('load', function () {
 				init()
 				animate()
 			})
 
 			function init() {
-				var target = document.getElementById('target')
+				const target = document.getElementById('target')
 
-				target.appendChild(createGraph('Linear.None', TWEEN.Easing.Linear.None))
+				target.appendChild(createGraph(group, 'Linear.None', TWEEN.Easing.Linear.None))
 
 				target.appendChild(document.createElement('br'))
 
-				target.appendChild(createGraph('Quadratic.In', TWEEN.Easing.Quadratic.In))
-				target.appendChild(createGraph('Quadratic.Out', TWEEN.Easing.Quadratic.Out))
-				target.appendChild(createGraph('Quadratic.InOut', TWEEN.Easing.Quadratic.InOut))
+				target.appendChild(createGraph(group, 'Quadratic.In', TWEEN.Easing.Quadratic.In))
+				target.appendChild(createGraph(group, 'Quadratic.Out', TWEEN.Easing.Quadratic.Out))
+				target.appendChild(createGraph(group, 'Quadratic.InOut', TWEEN.Easing.Quadratic.InOut))
 
-				target.appendChild(createGraph('Cubic.In', TWEEN.Easing.Cubic.In))
-				target.appendChild(createGraph('Cubic.Out', TWEEN.Easing.Cubic.Out))
-				target.appendChild(createGraph('Cubic.InOut', TWEEN.Easing.Cubic.InOut))
+				target.appendChild(createGraph(group, 'Cubic.In', TWEEN.Easing.Cubic.In))
+				target.appendChild(createGraph(group, 'Cubic.Out', TWEEN.Easing.Cubic.Out))
+				target.appendChild(createGraph(group, 'Cubic.InOut', TWEEN.Easing.Cubic.InOut))
 
 				target.appendChild(document.createElement('br'))
 
-				target.appendChild(createGraph('Quartic.In', TWEEN.Easing.Quartic.In))
-				target.appendChild(createGraph('Quartic.Out', TWEEN.Easing.Quartic.Out))
-				target.appendChild(createGraph('Quartic.InOut', TWEEN.Easing.Quartic.InOut))
+				target.appendChild(createGraph(group, 'Quartic.In', TWEEN.Easing.Quartic.In))
+				target.appendChild(createGraph(group, 'Quartic.Out', TWEEN.Easing.Quartic.Out))
+				target.appendChild(createGraph(group, 'Quartic.InOut', TWEEN.Easing.Quartic.InOut))
 
-				target.appendChild(createGraph('Quintic.In', TWEEN.Easing.Quintic.In))
-				target.appendChild(createGraph('Quintic.Out', TWEEN.Easing.Quintic.Out))
-				target.appendChild(createGraph('Quintic.InOut', TWEEN.Easing.Quintic.InOut))
+				target.appendChild(createGraph(group, 'Quintic.In', TWEEN.Easing.Quintic.In))
+				target.appendChild(createGraph(group, 'Quintic.Out', TWEEN.Easing.Quintic.Out))
+				target.appendChild(createGraph(group, 'Quintic.InOut', TWEEN.Easing.Quintic.InOut))
 
 				target.appendChild(document.createElement('br'))
 
-				target.appendChild(createGraph('Sinusoidal.In', TWEEN.Easing.Sinusoidal.In))
-				target.appendChild(createGraph('Sinusoidal.Out', TWEEN.Easing.Sinusoidal.Out))
-				target.appendChild(createGraph('Sinusoidal.InOut', TWEEN.Easing.Sinusoidal.InOut))
+				target.appendChild(createGraph(group, 'Sinusoidal.In', TWEEN.Easing.Sinusoidal.In))
+				target.appendChild(createGraph(group, 'Sinusoidal.Out', TWEEN.Easing.Sinusoidal.Out))
+				target.appendChild(createGraph(group, 'Sinusoidal.InOut', TWEEN.Easing.Sinusoidal.InOut))
 
-				target.appendChild(createGraph('Exponential.In', TWEEN.Easing.Exponential.In))
-				target.appendChild(createGraph('Exponential.Out', TWEEN.Easing.Exponential.Out))
-				target.appendChild(createGraph('Exponential.InOut', TWEEN.Easing.Exponential.InOut))
+				target.appendChild(createGraph(group, 'Exponential.In', TWEEN.Easing.Exponential.In))
+				target.appendChild(createGraph(group, 'Exponential.Out', TWEEN.Easing.Exponential.Out))
+				target.appendChild(createGraph(group, 'Exponential.InOut', TWEEN.Easing.Exponential.InOut))
 
 				target.appendChild(document.createElement('br'))
 
-				target.appendChild(createGraph('Circular.In', TWEEN.Easing.Circular.In))
-				target.appendChild(createGraph('Circular.Out', TWEEN.Easing.Circular.Out))
-				target.appendChild(createGraph('Circular.InOut', TWEEN.Easing.Circular.InOut))
+				target.appendChild(createGraph(group, 'Circular.In', TWEEN.Easing.Circular.In))
+				target.appendChild(createGraph(group, 'Circular.Out', TWEEN.Easing.Circular.Out))
+				target.appendChild(createGraph(group, 'Circular.InOut', TWEEN.Easing.Circular.InOut))
 
-				target.appendChild(createGraph('Elastic.In', TWEEN.Easing.Elastic.In))
-				target.appendChild(createGraph('Elastic.Out', TWEEN.Easing.Elastic.Out))
-				target.appendChild(createGraph('Elastic.InOut', TWEEN.Easing.Elastic.InOut))
+				target.appendChild(createGraph(group, 'Elastic.In', TWEEN.Easing.Elastic.In))
+				target.appendChild(createGraph(group, 'Elastic.Out', TWEEN.Easing.Elastic.Out))
+				target.appendChild(createGraph(group, 'Elastic.InOut', TWEEN.Easing.Elastic.InOut))
 
 				target.appendChild(document.createElement('br'))
 
-				target.appendChild(createGraph('Back.In', TWEEN.Easing.Back.In))
-				target.appendChild(createGraph('Back.Out', TWEEN.Easing.Back.Out))
-				target.appendChild(createGraph('Back.InOut', TWEEN.Easing.Back.InOut))
+				target.appendChild(createGraph(group, 'Back.In', TWEEN.Easing.Back.In))
+				target.appendChild(createGraph(group, 'Back.Out', TWEEN.Easing.Back.Out))
+				target.appendChild(createGraph(group, 'Back.InOut', TWEEN.Easing.Back.InOut))
 
-				target.appendChild(createGraph('Bounce.In', TWEEN.Easing.Bounce.In))
-				target.appendChild(createGraph('Bounce.Out', TWEEN.Easing.Bounce.Out))
-				target.appendChild(createGraph('Bounce.InOut', TWEEN.Easing.Bounce.InOut))
+				target.appendChild(createGraph(group, 'Bounce.In', TWEEN.Easing.Bounce.In))
+				target.appendChild(createGraph(group, 'Bounce.Out', TWEEN.Easing.Bounce.Out))
+				target.appendChild(createGraph(group, 'Bounce.InOut', TWEEN.Easing.Bounce.InOut))
 			}
 
 			function animate(time) {
 				requestAnimationFrame(animate)
 
-				TWEEN.update(time)
+				group.update(time)
 			}
 		</script>
 	</body>
diff --git a/examples/04_simplest.html b/examples/04_simplest.html
index a227256f..59e7cc55 100644
--- a/examples/04_simplest.html
+++ b/examples/04_simplest.html
@@ -12,31 +12,29 @@ <h2>04 _ simplest possible example</h2>
 			<p>Creating a tween and doing little else apart from that :)</p>
 		</div>
 
-		<script src="../dist/tween.umd.js"></script>
-		<script>
-			init()
-			animate()
+		<script type="module">
+			import * as TWEEN from '../dist/tween.esm.js'
 
-			function init() {
-				var output = document.createElement('div')
-				output.style.cssText = 'position: absolute; left: 50px; top: 300px; font-size: 100px'
-				document.body.appendChild(output)
+			const output = document.createElement('div')
+			output.style.cssText = 'position: absolute; left: 50px; top: 300px; font-size: 100px'
+			document.body.appendChild(output)
 
-				var tween = new TWEEN.Tween({x: 50, y: 0})
-					.to({x: 400}, 2000)
-					.easing(TWEEN.Easing.Elastic.InOut)
-					.onUpdate(function (object) {
-						output.innerHTML = 'x == ' + Math.round(object.x)
-						var transform = 'translateX(' + object.x + 'px)'
-						output.style.webkitTransform = transform
-						output.style.transform = transform
-					})
-					.start()
-			}
+			const tween = new TWEEN.Tween({x: 50, y: 0})
+				.to({x: 400}, 2000)
+				.easing(TWEEN.Easing.Elastic.InOut)
+				.onUpdate(function (object) {
+					output.innerHTML = 'x == ' + Math.round(object.x)
+					const transform = 'translateX(' + object.x + 'px)'
+					output.style.webkitTransform = transform
+					output.style.transform = transform
+				})
+				.start()
+
+			animate()
 
 			function animate(time) {
 				requestAnimationFrame(animate)
-				TWEEN.update(time)
+				tween.update(time)
 			}
 		</script>
 	</body>
diff --git a/examples/05_video_and_time.html b/examples/05_video_and_time.html
index 656cbdf0..52d17f16 100644
--- a/examples/05_video_and_time.html
+++ b/examples/05_video_and_time.html
@@ -17,7 +17,7 @@ <h2>05 _ video and time</h2>
 			style="
 				position: absolute;
 				left: 0px;
-				top: 300px;
+				top: 350px;
 				transform: translateX(50px);
 				font-size: 100px;
 				letter-spacing: -7px;
@@ -26,9 +26,11 @@ <h2>05 _ video and time</h2>
 			<video id="video" src="video/sintel.webm" width="320" height="138"></video>
 		</div>
 
-		<script src="../dist/tween.umd.js"></script>
 		<script type="module">
-			var video
+			import * as TWEEN from '../dist/tween.esm.js'
+
+			let video
+			let tween = null
 
 			playButton.addEventListener('click', function () {
 				init()
@@ -36,21 +38,21 @@ <h2>05 _ video and time</h2>
 			})
 
 			function init() {
-				var output = document.createElement('div')
+				const output = document.createElement('div')
 
-				var target = document.getElementById('target')
+				const target = document.getElementById('target')
 				target.appendChild(output)
 
 				video = document.getElementById('video')
 				video.addEventListener(
 					'play',
 					function () {
-						new TWEEN.Tween({x: 50, y: 0})
+						tween = new TWEEN.Tween({x: 50, y: 0})
 							.to({x: 400}, this.duration)
 							.easing(TWEEN.Easing.Linear.None)
 							.onUpdate(function (object) {
-								var roundX = Math.round(object.x)
-								var transform = 'translateX(' + roundX + 'px)'
+								const roundX = Math.round(object.x)
+								const transform = 'translateX(' + roundX + 'px)'
 								output.innerHTML = 'x == ' + roundX
 								target.style.transform = transform
 							})
@@ -63,8 +65,8 @@ <h2>05 _ video and time</h2>
 			}
 
 			function animate() {
-				if (video.readyState === video.HAVE_ENOUGH_DATA) {
-					TWEEN.update(video.currentTime)
+				if (tween && video.readyState === video.HAVE_ENOUGH_DATA) {
+					tween.update(video.currentTime)
 				}
 
 				requestAnimationFrame(animate)
diff --git a/examples/06_array_interpolation.html b/examples/06_array_interpolation.html
index 21be1941..ac790ebd 100644
--- a/examples/06_array_interpolation.html
+++ b/examples/06_array_interpolation.html
@@ -24,131 +24,34 @@ <h2>06 _ array interpolation</h2>
 
 		<div id="target"></div>
 
-		<script src="../dist/tween.umd.js"></script>
-		<script src="js/createGraph.js"></script>
-		<script>
-			init()
-			animate()
-
-			function init() {
-				var target = document.getElementById('target')
-
-				var width = 240,
-					height = 160
-
-				// random points
-				/*
-				var x0 = Math.random() * ( width - 40 ) + 20,
-					y0 = Math.random() * ( height - 40 ) + 20,
-					xA = [],
-					yA = [];
-
-				for ( var i = 0; i < 10; i++ ) {
-
-					xA.push( Math.random() * ( width - 40 ) + 20 );
-					yA.push( Math.random() * ( height - 40 ) + 20 );
-
-				}
-				*/
-
-				// fixed points
-
-				var min = 1 / 6,
-					max = 5 / 6
-
-				var x0 = width * min,
-					y0 = height / 2,
-					xA = [width * max, width / 2],
-					yA = [height * min, height * max]
+		<script type="module">
+			import {createPath, xA, x0, yA, y0} from './js/createPath.js'
+			import * as TWEEN from '../dist/tween.esm.js'
 
-				target.appendChild(createPath('Linear', TWEEN.Interpolation.Linear))
-				target.appendChild(createPath('Bezier', TWEEN.Interpolation.Bezier))
-				target.appendChild(createPath('CatmullRom', TWEEN.Interpolation.CatmullRom))
+			const group = new TWEEN.Group()
 
-				target.appendChild(document.createElement('br'))
+			const target = document.getElementById('target')
+			if (!target) throw 'missing element'
 
-				xA.push(x0)
-				yA.push(y0)
+			target.appendChild(createPath(group, 'Linear', TWEEN.Interpolation.Linear))
+			target.appendChild(createPath(group, 'Bezier', TWEEN.Interpolation.Bezier))
+			target.appendChild(createPath(group, 'CatmullRom', TWEEN.Interpolation.CatmullRom))
 
-				target.appendChild(createPath('start === end', TWEEN.Interpolation.Linear))
-				target.appendChild(createPath('', TWEEN.Interpolation.Bezier))
-				target.appendChild(createPath('', TWEEN.Interpolation.CatmullRom))
+			target.appendChild(document.createElement('br'))
 
-				function createPath(text, interpolation, width = 240, height = 160) {
-					var div = document.createElement('div')
-					div.style.display = 'inline-block'
-					// +20 for padding
-					div.style.width = width + 20 + 'px'
-					div.style.height = height + 20 + 'px'
+			xA.push(x0)
+			yA.push(y0)
 
-					var canvas = document.createElement('canvas')
-					canvas.style.width = width + 'px'
-					canvas.style.height = height + 'px'
-					canvas.width = toPhysicalPx(width)
-					canvas.height = toPhysicalPx(height)
+			target.appendChild(createPath(group, 'start === end', TWEEN.Interpolation.Linear))
+			target.appendChild(createPath(group, '', TWEEN.Interpolation.Bezier))
+			target.appendChild(createPath(group, '', TWEEN.Interpolation.CatmullRom))
 
-					var context = canvas.getContext('2d')
-					context.fillStyle = 'rgb(250,250,250)'
-					context.fillRect(0, 0, toPhysicalPx(width), toPhysicalPx(height))
-
-					context.lineWidth = toPhysicalPx(1)
-					context.strokeStyle = 'rgb(230,230,230)'
-
-					// points
-					context.fillStyle = 'rgb(200,200,200)'
-					context.fillRect(
-						toPhysicalPx(x0) - toPhysicalPx(3),
-						toPhysicalPx(y0) - toPhysicalPx(3),
-						toPhysicalPx(6),
-						toPhysicalPx(6),
-					)
-					context.fillRect(
-						toPhysicalPx(xA[xA.length - 1]) - toPhysicalPx(3),
-						toPhysicalPx(yA[yA.length - 1]) - toPhysicalPx(3),
-						toPhysicalPx(6),
-						toPhysicalPx(6),
-					)
-
-					for (var i = 0; i < xA.length; i++) {
-						context.fillRect(
-							toPhysicalPx(xA[i]) - toPhysicalPx(2),
-							toPhysicalPx(yA[i]) - toPhysicalPx(2),
-							toPhysicalPx(4),
-							toPhysicalPx(4),
-						)
-					}
-					//
-
-					context.lineWidth = toPhysicalPx(2)
-					context.strokeStyle = 'rgba(255,127,127,0.9)'
-					context.beginPath()
-					context.moveTo(toPhysicalPx(x0), toPhysicalPx(y0))
-					context.lineCap = 'round'
-
-					var position = {x: x0, y: y0}
-
-					new TWEEN.Tween(position)
-						.to({x: xA, y: yA}, 3000)
-						.easing(TWEEN.Easing.Linear.None)
-						.interpolation(interpolation)
-						.onUpdate(function () {
-							context.lineTo(toPhysicalPx(position.x), toPhysicalPx(position.y))
-							context.stroke()
-						})
-						.start()
-
-					div.appendChild(document.createTextNode(text))
-					div.appendChild(document.createElement('br'))
-					div.appendChild(canvas)
-
-					return div
-				}
-			}
+			animate()
 
 			function animate(time) {
 				requestAnimationFrame(animate)
 
-				TWEEN.update(time)
+				group.update(time)
 			}
 		</script>
 	</body>
diff --git a/examples/07_dynamic_to.html b/examples/07_dynamic_to.html
index 34b2c9fc..cd9c5d88 100644
--- a/examples/07_dynamic_to.html
+++ b/examples/07_dynamic_to.html
@@ -31,55 +31,43 @@ <h2>07 _ dynamic to object</h2>
 			</div>
 		</div>
 
-		<script src="../dist/tween.umd.js"></script>
 		<script type="module">
+			import {Tween, Group, Easing} from '../dist/tween.esm.js'
 			import {drawRabbit, drawFox} from './js/drawings.js'
 
 			startScene('scene1', false)
 			startScene('scene2', true)
 
 			function startScene(id, dynamic) {
-				var width
-				var height
-				var context
-				var rabbit
-				var fox
+				const group = new Group()
 
-				init()
-				animate()
+				const width = 480
+				const height = 320
 
-				function init() {
-					width = 480
-					height = 320
+				const scene = document.getElementById(id)
 
-					var scene = document.getElementById(id)
+				const canvas = document.createElement('canvas')
+				canvas.width = width
+				canvas.height = height
+				scene.appendChild(canvas)
 
-					var canvas = document.createElement('canvas')
-					canvas.width = width
-					canvas.height = height
-					scene.appendChild(canvas)
+				const context = canvas.getContext('2d')
 
-					context = canvas.getContext('2d')
+				const rabbit = {x: width - 50, y: 50}
 
-					rabbit = {x: width - 50, y: 50}
+				new Tween(rabbit, group)
+					.to({x: width - 50, y: height - 50}, 3000)
+					.easing(Easing.Exponential.InOut)
+					.start()
 
-					new TWEEN.Tween(rabbit)
-						.to({x: width - 50, y: height - 50}, 3000)
-						.easing(TWEEN.Easing.Exponential.InOut)
-						.start()
+				const fox = {x: 50, y: 50}
 
-					fox = {x: 50, y: 50}
+				new Tween(fox, group).to(rabbit, 3000).dynamic(dynamic).duration(3000).easing(Easing.Exponential.InOut).start()
 
-					new TWEEN.Tween(fox)
-						.to(rabbit, 3000)
-						.dynamic(dynamic)
-						.duration(3000)
-						.easing(TWEEN.Easing.Exponential.InOut)
-						.start()
-				}
+				animate()
 
 				function animate(time) {
-					TWEEN.update(time)
+					group.update(time)
 
 					// draw background
 					context.fillStyle = 'rgb(240,250,240)'
diff --git a/examples/07a_dynamic_to_two_array_values.html b/examples/07a_dynamic_to_two_array_values.html
index 155ab89c..19b1e4e6 100644
--- a/examples/07a_dynamic_to_two_array_values.html
+++ b/examples/07a_dynamic_to_two_array_values.html
@@ -31,80 +31,76 @@ <h2>07a _ dynamic to interpolation array</h2>
 			</div>
 		</div>
 
-		<script src="../dist/tween.umd.js"></script>
 		<script type="module">
+			import * as TWEEN from '../dist/tween.esm.js'
 			import {drawRabbit, drawFox} from './js/drawings.js'
 
 			startScene('scene1', false)
 			startScene('scene2', true)
 
 			function startScene(id, dynamic) {
-				var context
-				var width
-				var height
-				var rabbit1
-				var rabbit2
-				var fox
-
-				init()
-				animate()
+				const group = new TWEEN.Group()
+
+				const width = 480
+				const height = 320
+
+				const scene = document.getElementById(id)
+
+				const canvas = document.createElement('canvas')
+				canvas.width = width
+				canvas.height = height
+				scene.appendChild(canvas)
+
+				const context = canvas.getContext('2d')
+
+				const rabbit1 = {
+					x: width * 0.8,
+					y: 50,
+				}
 
-				function init() {
-					width = 480
-					height = 320
-
-					var scene = document.getElementById(id)
-
-					var canvas = document.createElement('canvas')
-					canvas.width = width
-					canvas.height = height
-					scene.appendChild(canvas)
-
-					context = canvas.getContext('2d')
-
-					rabbit1 = {
-						x: width * 0.8,
-						y: 50,
-					}
-
-					new TWEEN.Tween(rabbit1)
-						.to({x: width / 2, y: height - 50}, 2000)
-						.easing(TWEEN.Easing.Cubic.InOut)
-						.onUpdate(function ({x, y}) {
-							rabbits.x[1] = x
-							rabbits.y[1] = y
-						})
-						.start()
-
-					rabbit2 = {
-						x: width - 50,
-						y: height - 50,
-					}
-
-					new TWEEN.Tween(rabbit2)
-						.to({x: width / 3, y: 50}, 3000)
-						.easing(TWEEN.Easing.Cubic.InOut)
-						.onUpdate(function ({x, y}) {
-							rabbits.x[2] = x
-							rabbits.y[2] = y
-						})
-						.start()
-
-					var rabbits = {
-						x: [rabbit1.x, rabbit2.x],
-						y: [rabbit1.y, rabbit2.y],
-					}
-
-					fox = {
-						x: 50,
-						y: 50,
-					}
-
-					new TWEEN.Tween(fox).to(rabbits, 3000).dynamic(dynamic).interpolation(TWEEN.Interpolation.CatmullRom).start()
+				new TWEEN.Tween(rabbit1, group)
+					.to({x: width / 2, y: height - 50}, 2000)
+					.easing(TWEEN.Easing.Cubic.InOut)
+					.onUpdate(function ({x, y}) {
+						rabbits.x[1] = x
+						rabbits.y[1] = y
+					})
+					.start()
+
+				const rabbit2 = {
+					x: width - 50,
+					y: height - 50,
 				}
 
+				new TWEEN.Tween(rabbit2, group)
+					.to({x: width / 3, y: 50}, 3000)
+					.easing(TWEEN.Easing.Cubic.InOut)
+					.onUpdate(function ({x, y}) {
+						rabbits.x[2] = x
+						rabbits.y[2] = y
+					})
+					.start()
+
+				const rabbits = {
+					x: [rabbit1.x, rabbit2.x],
+					y: [rabbit1.y, rabbit2.y],
+				}
+
+				const fox = {
+					x: 50,
+					y: 50,
+				}
+
+				new TWEEN.Tween(fox, group)
+					.to(rabbits, 3000)
+					.dynamic(dynamic)
+					.interpolation(TWEEN.Interpolation.CatmullRom)
+					.start()
+
+				animate()
+
 				function animate(time) {
-					TWEEN.update(time)
+					group.update(time)
 
 					context.fillStyle = 'rgb(240,250,240)'
 					context.fillRect(0, 0, width, height)
diff --git a/examples/07b_dynamic_to_an_array_of_values.html b/examples/07b_dynamic_to_an_array_of_values.html
index 65bfccd3..48681aa0 100644
--- a/examples/07b_dynamic_to_an_array_of_values.html
+++ b/examples/07b_dynamic_to_an_array_of_values.html
@@ -31,17 +31,17 @@ <h2>07b _ dynamic to large interpolation array</h2>
 			</div>
 		</div>
 
-		<script src="../dist/tween.umd.js"></script>
 		<script type="module">
+			import * as TWEEN from '../dist/tween.esm.js'
 			import {drawRabbit, drawFox} from './js/drawings.js'
 
-			var width = 480
-			var height = 320
-			var rabbitValues = {x: [], y: [], eatenCounter: []}
+			const width = 480
+			const height = 320
+			const rabbitValues = {x: [], y: [], eatenCounter: []}
 
 			// generate random rabbits
 			const rabbitCount = 20
-			for (var i = 0; i < rabbitCount; i++) {
+			for (let i = 0; i < rabbitCount; i++) {
 				rabbitValues.x.push(50 + getRandomInt(width - 100))
 				rabbitValues.y.push(50 + getRandomInt(height - 100))
 				rabbitValues.eatenCounter.push(i + 1)
@@ -53,16 +53,16 @@ <h2>07b _ dynamic to large interpolation array</h2>
 			// rabbitValues.y = [height - 50, Math.random() * height]
 			// rabbitValues.eatenCounter = [1, 2]
 
-			var bunnyDestinations = []
+			const bunnyDestinations = []
 
-			for (var i = 0; i < rabbitCount; i++) {
+			for (let i = 0; i < rabbitCount; i++) {
 				bunnyDestinations.push({x: Math.random() * width, y: Math.random() * height})
 			}
 
-			var bunnyColors = []
+			const bunnyColors = []
 			const maxColor = 200 // avoiding pale colors
 
-			for (var i = 0; i < rabbitCount; i++) {
+			for (let i = 0; i < rabbitCount; i++) {
 				bunnyColors.push(`rgb(${getRandomInt(maxColor)}, ${getRandomInt(maxColor)}, ${getRandomInt(maxColor)})`)
 			}
 
@@ -70,77 +70,72 @@ <h2>07b _ dynamic to large interpolation array</h2>
 			startScene('scene2', true)
 
 			function startScene(id, dynamic) {
-				var context
-				var rabbits
-				var fox
+				const group = new TWEEN.Group()
+				const duration = 8000
+				const scene = document.getElementById(id)
+				const canvas = document.createElement('canvas')
 
-				init()
-				animate()
-
-				function init() {
-					var duration = 8000
-
-					var scene = document.getElementById(id)
-
-					var canvas = document.createElement('canvas')
-					canvas.width = width
-					canvas.height = height
-					scene.appendChild(canvas)
+				canvas.width = width
+				canvas.height = height
+				scene.appendChild(canvas)
 
-					context = canvas.getContext('2d')
+				const context = canvas.getContext('2d')
 
-					var rabbitTweens = []
-					rabbits = []
+				const rabbitTweens = []
+				const rabbits = []
 
-					// clone rabbitValues so it won't be modified (that way it will be unique for each scene)
-					const _rabbitValues = {
-						x: [...rabbitValues.x],
-						y: [...rabbitValues.y],
-						eatenCounter: [...rabbitValues.eatenCounter],
-					}
-
-					for (var i = 0; i < rabbitCount; i++) {
-						var rabbit = {
-							x: _rabbitValues.x[i],
-							y: _rabbitValues.y[i],
-							color: bunnyColors[i],
-							alive: true,
-						}
-						rabbits.push(rabbit)
-						rabbitTweens.push(createRabbitTween(i, rabbit))
-					}
+				// clone rabbitValues so it won't be modified (that way it will be unique for each scene)
+				const _rabbitValues = {
+					x: [...rabbitValues.x],
+					y: [...rabbitValues.y],
+					eatenCounter: [...rabbitValues.eatenCounter],
+				}
 
-					function createRabbitTween(index, rabbit) {
-						return new TWEEN.Tween(rabbit)
-							.to(bunnyDestinations[index], duration)
-							.onUpdate(function (object) {
-								// We need `index + 1` because Tween modifies the arrays and adds the fox start values to it.
-								// TODO this is confusing. Better if Tween simply never modified the input object.
-								_rabbitValues.x[index + 1] = object.x
-								_rabbitValues.y[index + 1] = object.y
-							})
-							.start()
+				for (let i = 0; i < rabbitCount; i++) {
+					const rabbit = {
+						x: _rabbitValues.x[i],
+						y: _rabbitValues.y[i],
+						color: bunnyColors[i],
+						alive: true,
 					}
+					rabbits.push(rabbit)
+					rabbitTweens.push(createRabbitTween(i, rabbit))
+				}
 
-					fox = {x: 50, y: 50, eatenCounter: 0}
-					var rabbitsEaten = 0
-
-					new TWEEN.Tween(fox)
-						.to(_rabbitValues, duration)
-						.dynamic(dynamic)
+				function createRabbitTween(index, rabbit) {
+					return new TWEEN.Tween(rabbit, group)
+						.to(bunnyDestinations[index], duration)
 						.onUpdate(function (object) {
-							rabbitsEaten = Math.floor(object.eatenCounter)
-							if (rabbitsEaten > 0) {
-								// A dead rabbit stops moving.
-								rabbitTweens[rabbitsEaten - 1].stop()
-								rabbits[rabbitsEaten - 1].alive = false
-							}
+							// We need `index + 1` because Tween modifies the arrays and adds the fox start values to it.
+							// TODO this is confusing. Better if Tween simply never modified the input object.
+							_rabbitValues.x[index + 1] = object.x
+							_rabbitValues.y[index + 1] = object.y
 						})
 						.start()
 				}
 
+				const fox = {x: 50, y: 50, eatenCounter: 0}
+				let rabbitsEaten = 0
+
+				new TWEEN.Tween(fox, group)
+					.to(_rabbitValues, duration)
+					.dynamic(dynamic)
+					.onUpdate(function (object) {
+						rabbitsEaten = Math.floor(object.eatenCounter)
+						if (rabbitsEaten > 0) {
+							// A dead rabbit stops moving.
+							rabbitTweens[rabbitsEaten - 1].stop()
+							rabbits[rabbitsEaten - 1].alive = false
+						}
+					})
+					.start()
+
+				animate()
+
 				function animate(time) {
-					const stillRunning = TWEEN.update(time)
+					group.update(time)
+
+					const stillRunning = !group.allStopped()
 
 					// draw background
 					context.fillStyle = 'rgb(240,250,240)'
diff --git a/examples/08_repeat.html b/examples/08_repeat.html
index 025b48af..93c02707 100644
--- a/examples/08_repeat.html
+++ b/examples/08_repeat.html
@@ -12,54 +12,61 @@ <h2>08 _ repeat</h2>
 			<p>Demonstrating the repeat() feature.</p>
 		</div>
 		<div style="position: absolute; top: 100px; left: 400px">
-			<div id="target1" data-rotation="0" class="box">repeat once</div>
-			<div id="target2" data-rotation="0" class="box">repeat five times</div>
+			<div id="target1" data-rotation="0" class="box">no repeat</div>
+			<div id="target2" data-rotation="0" class="box">repeat twice</div>
 			<div id="target3" data-rotation="0" class="box">repeat forever</div>
 		</div>
 
-		<script src="../dist/tween.umd.js"></script>
-		<script>
+		<script type="module">
+			import {Tween, Group, Easing} from '../dist/tween.esm.js'
+
+			const group = new Group()
+
 			init()
 			animate()
 
 			function init() {
-				var target1 = document.getElementById('target1'),
-					tween1 = new TWEEN.Tween(target1.dataset)
-						.to({rotation: 360}, 2000)
-						.repeat(1)
-						.delay(1000)
+				const target1 = document.getElementById('target1'),
+					tween1 = new Tween(target1.dataset)
+						.to({rotation: 360}, 1000)
+						.easing(Easing.Exponential.InOut)
+						.delay(100)
 						.onUpdate(function (object) {
 							updateBox(target1, object)
 						})
 						.start(),
 					target2 = document.getElementById('target2'),
-					tween2 = new TWEEN.Tween(target2.dataset)
-						.to({rotation: 360}, 2000)
-						.repeat(5)
-						.delay(1000)
+					tween2 = new Tween(target2.dataset)
+						.to({rotation: 360}, 1000)
+						.easing(Easing.Exponential.InOut)
+						.repeat(2)
+						.delay(100)
 						.onUpdate(function (object) {
 							updateBox(target2, object)
 						})
 						.start(),
 					target3 = document.getElementById('target3'),
-					tween3 = new TWEEN.Tween(target3.dataset)
-						.to({rotation: 360}, 2000)
+					tween3 = new Tween(target3.dataset)
+						.to({rotation: 360}, 1000)
+						.easing(Easing.Exponential.InOut)
 						.repeat(Infinity)
-						.delay(1000)
+						.delay(100)
 						.onUpdate(function (object) {
 							updateBox(target3, object)
 						})
 						.start()
+
+				group.add(tween1, tween2, tween3)
 			}
 
 			function animate(time) {
 				requestAnimationFrame(animate)
 
-				TWEEN.update(time)
+				group.update(time)
 			}
 
 			function updateBox(box, params) {
-				var s = box.style,
+				const s = box.style,
 					transform = 'rotate(' + Math.floor(params.rotation) + 'deg)'
 				s.webkitTransform = transform
 				s.mozTransform = transform
diff --git a/examples/09_relative_values.html b/examples/09_relative_values.html
index 4e69de3f..403dd4cc 100644
--- a/examples/09_relative_values.html
+++ b/examples/09_relative_values.html
@@ -17,41 +17,16 @@
 				background: #fcc;
 			}
 		</style>
-		<script src="../dist/tween.umd.js"></script>
-		<script>
-			window.onload = function () {
-				init()
-				animate()
-			}
-
-			function init() {
-				var target1 = document.getElementById('target1'),
-					tween1 = new TWEEN.Tween(target1.dataset)
-						.to({top: '+20', left: '-20'}, 500)
-						.repeat(5)
-						.delay(500)
-						.easing(TWEEN.Easing.Exponential.In)
-						.onUpdate(function (object) {
-							object.top = Math.round(object.top)
-							object.left = Math.round(object.left)
-							updateBox(target1, object)
-						})
-						.start()
-
-				updateBox(target1, target1.dataset)
-			}
 
-			function animate(time) {
-				requestAnimationFrame(animate)
-				TWEEN.update(time)
-			}
-
-			function updateBox(box, params) {
-				var s = box.style
-				var transform = 'translate(' + params.left + 'px, ' + params.top + 'px)'
-				s.transform = transform
+		<script type="importmap">
+			{
+				"imports": {
+					"@tweenjs/tween.js": "../dist/tween.esm.js"
+				}
 			}
 		</script>
+
+		<script type="module" src="./09_relative_values.js"></script>
 	</head>
 	<body>
 		<div id="info">
diff --git a/examples/09_relative_values.js b/examples/09_relative_values.js
new file mode 100644
index 00000000..75d30215
--- /dev/null
+++ b/examples/09_relative_values.js
@@ -0,0 +1,29 @@
+import {Tween, Group, Easing} from '@tweenjs/tween.js'
+
+const target1 = document.getElementById('target1')
+const tween = new Tween(target1.dataset)
+	.to({top: '+20', left: '-20'}, 500)
+	.repeat(5)
+	.delay(500)
+	.easing(Easing.Exponential.In)
+	.onUpdate(function (object) {
+		object.top = Math.round(object.top)
+		object.left = Math.round(object.left)
+		updateBox(target1, object)
+	})
+	.start()
+
+updateBox(target1, target1.dataset)
+
+animate()
+
+function animate(time) {
+	requestAnimationFrame(animate)
+	tween.update(time)
+}
+
+function updateBox(box, params) {
+	const s = box.style
+	const transform = 'translate(' + params.left + 'px, ' + params.top + 'px)'
+	s.transform = transform
+}
diff --git a/examples/10_yoyo.html b/examples/10_yoyo.html
index 9378887e..2045ce36 100644
--- a/examples/10_yoyo.html
+++ b/examples/10_yoyo.html
@@ -4,6 +4,16 @@
 		<title>Tween.js / yoyo</title>
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 		<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
+
+		<script type="importmap">
+			{
+				"imports": {
+					"tweenjs": "../dist/tween.esm.js"
+				}
+			}
+		</script>
+
+		<script type="module" src="./10_yoyo.js"></script>
 	</head>
 	<body>
 		<div id="info">
@@ -29,110 +39,6 @@ <h2>10 _ yoyo</h2>
 			</div>
 		</div>
 
-		<script src="../dist/tween.umd.js"></script>
-		<script>
-			init()
-			animate()
-
-			var restart, stop, start, pause, resume
-
-			function init() {
-				var target1 = document.getElementById('target1')
-				var tween1 = new TWEEN.Tween(target1.dataset)
-					.to({rotation: 360, y: 300}, 750)
-					.repeat(1)
-					.delay(1000)
-					.yoyo(true)
-					.easing(TWEEN.Easing.Cubic.InOut)
-					.onUpdate(function (object) {
-						updateBox(target1, object)
-					})
-					.start()
-				var target2 = document.getElementById('target2')
-				var tween2 = new TWEEN.Tween(target2.dataset)
-					.to({rotation: 360, y: 300}, 750)
-					.repeat(Infinity)
-					.delay(1000)
-					.yoyo(true)
-					.easing(TWEEN.Easing.Cubic.InOut)
-					.onUpdate(function (object) {
-						updateBox(target2, object)
-					})
-					.start()
-				var target3 = document.getElementById('target3')
-				var tween3 = new TWEEN.Tween(target3.dataset)
-					.to({rotation: '+360', y: '+300'}, 750)
-					.repeat(1)
-					.delay(1000)
-					.yoyo(true)
-					.easing(TWEEN.Easing.Cubic.InOut)
-					.onUpdate(function (object) {
-						updateBox(target3, object)
-					})
-					.start()
-				var target4 = document.getElementById('target4')
-				var tween4 = new TWEEN.Tween(target4.dataset)
-					.to({rotation: '+360', y: '+300'}, 750)
-					.repeat(Infinity)
-					.delay(1000)
-					.yoyo(true)
-					.easing(TWEEN.Easing.Cubic.InOut)
-					.onUpdate(function (object) {
-						updateBox(target4, object)
-					})
-					.start()
-
-				restart = function () {
-					tween1.stop().start()
-					tween2.stop().start()
-					tween3.stop().start()
-					tween4.stop().start()
-				}
-
-				stop = function () {
-					tween1.stop()
-					tween2.stop()
-					tween3.stop()
-					tween4.stop()
-				}
-
-				start = function () {
-					tween1.start()
-					tween2.start()
-					tween3.start()
-					tween4.start()
-				}
-
-				pause = function () {
-					tween1.pause()
-					tween2.pause()
-					tween3.pause()
-					tween4.pause()
-				}
-
-				resume = function () {
-					tween1.resume()
-					tween2.resume()
-					tween3.resume()
-					tween4.resume()
-				}
-			}
-
-			function animate(time) {
-				requestAnimationFrame(animate)
-
-				TWEEN.update(time)
-			}
-
-			function updateBox(box, params) {
-				var s = box.style,
-					transform = 'translateY(' + Math.round(params.y) + 'px) rotate(' + Math.floor(params.rotation) + 'deg)'
-				s.webkitTransform = transform
-				s.mozTransform = transform
-				s.transform = transform
-			}
-		</script>
-
 		<style type="text/css">
 			.box {
 				width: 100px;
diff --git a/examples/10_yoyo.js b/examples/10_yoyo.js
new file mode 100644
index 00000000..4eaf0ff6
--- /dev/null
+++ b/examples/10_yoyo.js
@@ -0,0 +1,102 @@
+// @ts-check
+import {Tween, Group, Easing} from 'tweenjs'
+
+const group = new Group()
+
+animate()
+
+const target1 = document.getElementById('target1')
+const tween1 = new Tween(target1.dataset, group)
+	.to({rotation: 360, y: 300}, 750)
+	.repeat(1)
+	.delay(1000)
+	.yoyo(true)
+	.easing(Easing.Cubic.InOut)
+	.onUpdate(function (object) {
+		updateBox(target1, object)
+	})
+	.start()
+const target2 = document.getElementById('target2')
+const tween2 = new Tween(target2.dataset, group)
+	.to({rotation: 360, y: 300}, 750)
+	.repeat(Infinity)
+	.delay(1000)
+	.yoyo(true)
+	.easing(Easing.Cubic.InOut)
+	.onUpdate(function (object) {
+		updateBox(target2, object)
+	})
+	.start()
+const target3 = document.getElementById('target3')
+const tween3 = new Tween(target3.dataset, group)
+	.to({rotation: '+360', y: '+300'}, 750)
+	.repeat(1)
+	.delay(1000)
+	.yoyo(true)
+	.easing(Easing.Cubic.InOut)
+	.onUpdate(function (object) {
+		updateBox(target3, object)
+	})
+	.start()
+const target4 = document.getElementById('target4')
+const tween4 = new Tween(target4.dataset, group)
+	.to({rotation: '+360', y: '+300'}, 750)
+	.repeat(Infinity)
+	.delay(1000)
+	.yoyo(true)
+	.easing(Easing.Cubic.InOut)
+	.onUpdate(function (object) {
+		updateBox(target4, object)
+	})
+	.start()
+
+// TODO perhaps add these methods to Group
+
+const restart = (window.restart = function () {
+	tween1.stop().start()
+	tween2.stop().start()
+	tween3.stop().start()
+	tween4.stop().start()
+})
+
+const stop = (window.stop = function () {
+	tween1.stop()
+	tween2.stop()
+	tween3.stop()
+	tween4.stop()
+})
+
+const start = (window.start = function () {
+	tween1.start()
+	tween2.start()
+	tween3.start()
+	tween4.start()
+})
+
+const pause = (window.pause = function () {
+	tween1.pause()
+	tween2.pause()
+	tween3.pause()
+	tween4.pause()
+})
+
+const resume = (window.resume = function () {
+	tween1.resume()
+	tween2.resume()
+	tween3.resume()
+	tween4.resume()
+})
+
+function animate(time) {
+	requestAnimationFrame(animate)
+
+	group.update(time)
+}
+
+function updateBox(box, params) {
+	const s = box.style,
+		transform = 'translateY(' + Math.round(params.y) + 'px) rotate(' + Math.floor(params.rotation) + 'deg)'
+	s.webkitTransform = transform
+	s.mozTransform = transform
+	s.transform = transform
+}
diff --git a/examples/11_stop_all_chained_tweens.html b/examples/11_stop_all_chained_tweens.html
index 2d36b720..84ba05c7 100644
--- a/examples/11_stop_all_chained_tweens.html
+++ b/examples/11_stop_all_chained_tweens.html
@@ -18,28 +18,31 @@ <h2>11 _ stop all chained tweens.</h2>
 			<div id="target2" data-rotation="0" data-y="0" class="box" style="left: 0px; top: 200px">Box Two</div>
 		</div>
 
-		<script src="../dist/tween.umd.js"></script>
-		<script>
+		<script type="module">
+			import * as TWEEN from '../dist/tween.esm.js'
+
+			const group = new TWEEN.Group()
+
 			function animate(time) {
+				group.update(time)
 				requestAnimationFrame(animate)
-				TWEEN.update(time)
 			}
 
 			animate()
 
-			var a = document.getElementById('target1')
-			var b = document.getElementById('target2')
-			var start = document.getElementById('start')
-			var stop = document.getElementById('stop')
-			var t0, t1
-			var p0 = {x: 0},
+			const a = document.getElementById('target1')
+			const b = document.getElementById('target2')
+			const start = document.getElementById('start')
+			const stop = document.getElementById('stop')
+			let t0, t1
+			const p0 = {x: 0},
 				p1 = {x: 0}
 
 			start.onclick = function () {
 				if (!t0 && !t1) {
-					t0 = new TWEEN.Tween(p0)
+					t0 = new TWEEN.Tween(p0, group)
 						.to({x: 700}, 2000)
-						.delay(1000)
+						.delay(100)
 						.easing(TWEEN.Easing.Elastic.InOut)
 						.onUpdate(function () {
 							a.style.left = p0.x + 'px'
@@ -49,9 +52,9 @@ <h2>11 _ stop all chained tweens.</h2>
 							a.style.left = p0.x + 'px'
 						})
 
-					t1 = new TWEEN.Tween(p1)
+					t1 = new TWEEN.Tween(p1, group)
 						.to({x: 1000}, 3000)
-						.delay(1000)
+						.delay(100)
 						.easing(TWEEN.Easing.Elastic.InOut)
 						.onUpdate(function () {
 							b.style.left = p1.x + 'px'
diff --git a/examples/12_graphs_custom_functions.html b/examples/12_graphs_custom_functions.html
index 635af495..e54ee605 100644
--- a/examples/12_graphs_custom_functions.html
+++ b/examples/12_graphs_custom_functions.html
@@ -27,43 +27,50 @@ <h2>12 _ graphs for custom easing functions</h2>
 
 		<div id="target"></div>
 
-		<script src="../dist/tween.umd.js"></script>
-		<script src="js/createGraph.js"></script>
-		<script>
+		<script type="module">
+			import {createGraph} from './js/createGraph.js'
+			import * as TWEEN from '../dist/tween.esm.js'
+
+			const group = new TWEEN.Group()
+
 			window.addEventListener('load', function () {
 				init()
 				animate()
 			})
 
 			function init() {
-				var target = document.getElementById('target')
+				const target = document.getElementById('target')
 
-				target.appendChild(createGraph('Ten Steps', tenStepsEasing))
+				target.appendChild(createGraph(group, 'Ten Steps', tenStepsEasing))
 
 				target.appendChild(document.createElement('br'))
 
-				for (var i = 0; i < 4; i++) {
-					var numSteps = (i + 1) * 4
-					target.appendChild(createGraph(numSteps + ' steps', createStepFunction(numSteps)))
+				for (let i = 0; i < 4; i++) {
+					const numSteps = (i + 1) * 4
+					target.appendChild(createGraph(group, numSteps + ' steps', createStepFunction(numSteps)))
 				}
 
 				target.appendChild(document.createElement('br'))
 
-				target.appendChild(createGraph('Random', randomEasing))
+				target.appendChild(createGraph(group, 'Random', randomEasing))
 
 				target.appendChild(document.createElement('br'))
 
 				target.appendChild(
-					createGraph('Noisy Exponential.InOut', createNoisyEasing(0.1, TWEEN.Easing.Exponential.InOut)),
+					createGraph(group, 'Noisy Exponential.InOut', createNoisyEasing(0.1, TWEEN.Easing.Exponential.InOut)),
+				)
+				target.appendChild(
+					createGraph(group, 'Noisy Elastic.InOut', createNoisyEasing(0.1, TWEEN.Easing.Elastic.InOut)),
+				)
+				target.appendChild(
+					createGraph(group, 'Noisy Circular.InOut', createNoisyEasing(0.1, TWEEN.Easing.Circular.InOut)),
 				)
-				target.appendChild(createGraph('Noisy Elastic.InOut', createNoisyEasing(0.1, TWEEN.Easing.Elastic.InOut)))
-				target.appendChild(createGraph('Noisy Circular.InOut', createNoisyEasing(0.1, TWEEN.Easing.Circular.InOut)))
 			}
 
 			function animate() {
 				requestAnimationFrame(animate)
 
-				TWEEN.update()
+				group.update()
 			}
 
 			function tenStepsEasing(k) {
@@ -87,7 +94,7 @@ <h2>12 _ graphs for custom easing functions</h2>
 			// Getting meta again: why not use existing functions as the
 			// base for new easing functions?
 			function createNoisyEasing(randomProportion, easingFunction) {
-				var normalProportion = 1.0 - randomProportion
+				const normalProportion = 1.0 - randomProportion
 				return function (k) {
 					return randomProportion * Math.random() + normalProportion * easingFunction(k)
 				}
diff --git a/examples/13_relative_start_time.html b/examples/13_relative_start_time.html
index c396fcb8..768593a8 100644
--- a/examples/13_relative_start_time.html
+++ b/examples/13_relative_start_time.html
@@ -40,36 +40,31 @@ <h2>13 _ relative start time</h2>
 			Two
 		</div>
 
-		<script src="../dist/tween.umd.js"></script>
-		<script>
-			var position
-			var target
-			var tween1, tween2
+		<script type="module">
+			import * as TWEEN from '../dist/tween.esm.js'
 
-			init()
-			animate()
+			const position1 = {x: 100, y: 100, rotation: 0}
+			const position2 = {x: 100, y: 300, rotation: 0}
+			const target1 = document.getElementById('target1')
+			const target2 = document.getElementById('target2')
 
-			function init() {
-				position1 = {x: 100, y: 100, rotation: 0}
-				position2 = {x: 100, y: 300, rotation: 0}
-				target1 = document.getElementById('target1')
-				target2 = document.getElementById('target2')
+			const tween1 = new TWEEN.Tween(position1)
+				.to({x: 700, y: 200, rotation: 359}, 2000)
+				.easing(TWEEN.Easing.Elastic.InOut)
+				.onUpdate(update1)
 
-				tween1 = new TWEEN.Tween(position1)
-					.to({x: 700, y: 200, rotation: 359}, 2000)
-					.easing(TWEEN.Easing.Elastic.InOut)
-					.onUpdate(update1)
+			const tween2 = new TWEEN.Tween(position2).to({x: 500, y: 300, rotation: -90}, 2000).onUpdate(update2)
 
-				tween2 = new TWEEN.Tween(position2).to({x: 500, y: 300, rotation: -90}, 2000).onUpdate(update2)
+			tween1.delay(2000).start()
+			tween2.delay(100).start()
 
-				tween1.delay(2000).start()
-				tween2.delay(100).start()
-			}
+			animate()
 
 			function animate(time) {
 				requestAnimationFrame(animate)
 
-				TWEEN.update(time)
+				tween1.update(time)
+				tween2.update(time)
 			}
 
 			function update1() {
diff --git a/examples/14_pause_tween.html b/examples/14_pause_tween.html
index c9866b5c..b908a95a 100644
--- a/examples/14_pause_tween.html
+++ b/examples/14_pause_tween.html
@@ -45,32 +45,26 @@ <h2>14 _ pause tween</h2>
 			</div>
 		</div>
 
-		<script src="../dist/tween.umd.js"></script>
-		<script>
-			var progress
-			var fill
-			var tween1
+		<script type="module">
+			import * as TWEEN from '../dist/tween.esm.js'
 
-			init()
-			animate()
+			const progress = {width: 0}
+			const fill = document.getElementById('progress_bar_fill')
 
-			function init() {
-				progress = {width: 0}
-				fill = document.getElementById('progress_bar_fill')
+			const tween1 = new TWEEN.Tween(progress)
+				.to({width: 100}, 2000)
+				.onUpdate(update1)
+				.yoyo(true)
+				.repeat(Infinity)
+				.delay(500)
+				.start()
 
-				tween1 = new TWEEN.Tween(progress)
-					.to({width: 100}, 2000)
-					.onUpdate(update1)
-					.yoyo(true)
-					.repeat(Infinity)
-					.delay(500)
-					.start()
-			}
+			animate()
 
 			function animate(time) {
 				requestAnimationFrame(animate)
 
-				TWEEN.update(time)
+				tween1.update(time)
 			}
 
 			function update1() {
@@ -78,11 +72,11 @@ <h2>14 _ pause tween</h2>
 				fill.innerHTML = Math.floor(progress.width) + '%'
 			}
 
-			function pause() {
+			window.pause = () => {
 				tween1.pause()
 			}
 
-			function resume() {
+			window.resume = () => {
 				tween1.resume()
 			}
 		</script>
diff --git a/examples/15_complex_properties.html b/examples/15_complex_properties.html
index bb3315e7..26d0fee2 100644
--- a/examples/15_complex_properties.html
+++ b/examples/15_complex_properties.html
@@ -25,42 +25,33 @@ <h2>15 _ complex properties</h2>
 			hello world!
 		</div>
 
-		<script src="../dist/tween.umd.js"></script>
-		<script>
-			var position
-			var target
-			var tween, tweenBack
+		<script type="module">
+			import * as TWEEN from '../dist/tween.esm.js'
 
-			init()
-			animate()
-
-			function init() {
-				position = {x: 100, y: 100, styles: {opacity: 1.0}}
-				target = document.getElementById('target')
-				tween = new TWEEN.Tween(position)
-					.to({x: 700, y: 200, styles: {opacity: 0}}, 1000)
-					.delay(1000)
-					.onUpdate(update)
+			const group = new TWEEN.Group()
 
-				tweenBack = new TWEEN.Tween(position)
-					.to({x: 100, y: 100, styles: {opacity: 1.0}}, 1000)
+			const position = {x: 100, y: 100, styles: {opacity: 1.0}}
+			const target = document.getElementById('target')
+			const tween = new TWEEN.Tween(position, group)
+				.to({x: 700, y: 200, styles: {opacity: 0}}, 1000)
+				.delay(1000)
+				.onUpdate(update)
 
-					.onUpdate(update)
+			const tweenBack = new TWEEN.Tween(position, group)
+				.to({x: 100, y: 100, styles: {opacity: 1.0}}, 1000)
 
-				tween.chain(tweenBack)
-				tweenBack.chain(tween)
+				.onUpdate(update)
 
-				tween.start()
-			}
+			tween.chain(tweenBack)
+			tweenBack.chain(tween)
 
-			//If we register the callback animate, but the TWEEN.update(time) returns false,
-			//cancel/unregister the handler
-			function animate(time) {
-				var id = requestAnimationFrame(animate)
+			tween.start()
 
-				var result = TWEEN.update(time)
+			animate()
 
-				if (!result) cancelAnimationFrame(id)
+			function animate(time) {
+				group.update(time)
+				requestAnimationFrame(animate)
 			}
 
 			function update(values) {
diff --git a/examples/16_animate_an_array_of_values.html b/examples/16_animate_an_array_of_values.html
index 0e9ed5c2..a510fea0 100644
--- a/examples/16_animate_an_array_of_values.html
+++ b/examples/16_animate_an_array_of_values.html
@@ -17,30 +17,27 @@ <h2>16 _ animate an array of values</h2>
 			<div id="target2" class="box">three</div>
 		</div>
 
-		<script src="../dist/tween.umd.js"></script>
-		<script>
-			init()
-			animate()
+		<script type="module">
+			import * as TWEEN from '../dist/tween.esm.js'
 
-			function init() {
-				var target,
-					axes = ['Y', 'Z', 'X'],
-					tween1 = new TWEEN.Tween([0, 0, 0])
-						.to([360, 540, '+180'], 2000)
-						.repeat(1)
-						.delay(1000)
-						.easing(TWEEN.Easing.Cubic.InOut)
-						.onUpdate(function (rotations) {
-							for (var i = 0; i < rotations.length; i++)
-								document.getElementById('target' + i).style.transform =
-									'rotate' + axes[i] + '(' + Math.floor(rotations[i]) + 'deg)'
-						})
-						.start()
-			}
+			const axes = ['Y', 'Z', 'X']
+			const tween1 = new TWEEN.Tween([0, 0, 0])
+				.to([360, 540, '+180'], 2000)
+				.repeat(1)
+				.delay(1000)
+				.easing(TWEEN.Easing.Cubic.InOut)
+				.onUpdate(function (rotations) {
+					for (let i = 0; i < rotations.length; i++)
+						document.getElementById('target' + i).style.transform =
+							'rotate' + axes[i] + '(' + Math.floor(rotations[i]) + 'deg)'
+				})
+				.start()
+
+			animate()
 
 			function animate(time) {
 				// Keep requesting frames only if we still need to update.
-				if (TWEEN.update(time)) requestAnimationFrame(animate)
+				if (tween1.update(time)) requestAnimationFrame(animate)
 			}
 		</script>
 
diff --git a/examples/17_generate_pow.html b/examples/17_generate_pow.html
index 2733e838..52fa9450 100644
--- a/examples/17_generate_pow.html
+++ b/examples/17_generate_pow.html
@@ -24,46 +24,44 @@ <h2>17 _ Easing with Pow</h2>
 
 		<div id="target"></div>
 
-		<script src="../dist/tween.umd.js"></script>
-		<script src="js/createGraph.js"></script>
-		<script>
-			window.addEventListener('load', function () {
-				init()
-				animate()
-			})
+		<script type="module">
+			import {createGraph} from './js/createGraph.js'
+			import * as TWEEN from '../dist/tween.esm.js'
 
-			function init() {
-				var target = document.getElementById('target')
+			const group = new TWEEN.Group()
 
-				const addGraph = pow => {
-					target.appendChild(createGraph(`Power"${pow}".In`, TWEEN.Easing.generatePow(pow).In))
-					target.appendChild(createGraph(`Power"${pow}".Out`, TWEEN.Easing.generatePow(pow).Out))
-					target.appendChild(createGraph(`Power"${pow}".InOut`, TWEEN.Easing.generatePow(pow).InOut))
-				}
-				target.appendChild(createGraph('Power1', TWEEN.Easing.generatePow(1).In))
+			const target = document.getElementById('target')
 
-				target.appendChild(document.createElement('br'))
+			const addGraph = pow => {
+				target.appendChild(createGraph(group, `Power"${pow}".In`, TWEEN.Easing.generatePow(pow).In))
+				target.appendChild(createGraph(group, `Power"${pow}".Out`, TWEEN.Easing.generatePow(pow).Out))
+				target.appendChild(createGraph(group, `Power"${pow}".InOut`, TWEEN.Easing.generatePow(pow).InOut))
+			}
+			target.appendChild(createGraph(group, 'Power1', TWEEN.Easing.generatePow(1).In))
 
-				addGraph(2)
-				addGraph(3)
+			target.appendChild(document.createElement('br'))
 
-				target.appendChild(document.createElement('br'))
+			addGraph(2)
+			addGraph(3)
 
-				addGraph(4)
-				addGraph(5)
+			target.appendChild(document.createElement('br'))
 
-				target.appendChild(document.createElement('br'))
+			addGraph(4)
+			addGraph(5)
 
-				addGraph(5.8)
-				target.appendChild(createGraph(`Exponential.In`, TWEEN.Easing.Exponential.In))
-				target.appendChild(createGraph(`Exponential.Out`, TWEEN.Easing.Exponential.Out))
-				target.appendChild(createGraph(`Exponential.InOut`, TWEEN.Easing.Exponential.InOut))
-			}
+			target.appendChild(document.createElement('br'))
+
+			addGraph(5.8)
+			target.appendChild(createGraph(group, `Exponential.In`, TWEEN.Easing.Exponential.In))
+			target.appendChild(createGraph(group, `Exponential.Out`, TWEEN.Easing.Exponential.Out))
+			target.appendChild(createGraph(group, `Exponential.InOut`, TWEEN.Easing.Exponential.InOut))
+
+			animate()
 
 			function animate(time) {
 				requestAnimationFrame(animate)
 
-				TWEEN.update(time)
+				group.update(time)
 			}
 		</script>
 	</body>
diff --git a/examples/18_start_from_current_values.html b/examples/18_start_from_current_values.html
index 8058d723..00d66677 100644
--- a/examples/18_start_from_current_values.html
+++ b/examples/18_start_from_current_values.html
@@ -28,36 +28,27 @@ <h2>18 _ start from current values</h2>
 			"
 		></div>
 
-		<script src="../dist/tween.umd.js"></script>
-		<script>
-			var position
-			var target
-			var tween, tweenBack
+		<script type="module">
+			import * as TWEEN from '../dist/tween.esm.js'
 
-			init()
-			animate()
+			const position = {x: 400, y: 200}
+			const target = document.getElementById('target')
+			const tween = new TWEEN.Tween(position)
+				.to({x: 700, y: 200}, 2000)
+				.easing(TWEEN.Easing.Elastic.InOut)
+				.onUpdate(update)
 
-			function init() {
-				position = {x: 400, y: 200}
-				target = document.getElementById('target')
-				tween = new TWEEN.Tween(position).to({x: 700, y: 200}, 2000).easing(TWEEN.Easing.Elastic.InOut).onUpdate(update)
+			document.getElementById('start-tween').addEventListener('click', () => {
+				tween.startFromCurrentValues() // start the tween from its current position
+				animate() // call animate as we unregister the handler if TWEEN.update(time) returns false
+			})
 
-				document.getElementById('start-tween').addEventListener('click', () => {
-					tween.startFromCurrentValues() // start the tween from its current position
-					animate() // call animate as we unregister the handler if TWEEN.update(time) returns false
-				})
+			registerArrowButtonEventListeners()
 
-				registerArrowButtonEventListeners()
-			}
+			animate()
 
-			//If we register the callback animate, but the TWEEN.update(time) returns false,
-			//cancel/unregister the handler
 			function animate(time) {
-				var id = requestAnimationFrame(animate)
-
-				var result = TWEEN.update(time)
-
-				if (!result) cancelAnimationFrame(id)
+				if (tween.update(time)) requestAnimationFrame(animate)
 			}
 
 			function update() {
diff --git a/examples/example-projects/plain-javascript-modules/animate.js b/examples/example-projects/plain-javascript-modules/animate.js
index 5003244d..a5961fe1 100644
--- a/examples/example-projects/plain-javascript-modules/animate.js
+++ b/examples/example-projects/plain-javascript-modules/animate.js
@@ -1,12 +1,9 @@
-// For sake of example, we put animate() in a separate file, and import it into index.js.
-import * as TWEEN from '@tweenjs/tween.js'
+export function animate(group) {
+	function loop(time) {
+		group.update(time)
+		const stopped = group.allStopped()
+		if (!stopped) requestAnimationFrame(loop)
+	}
 
-//If we register the callback animate, but the TWEEN.update(time) returns false,
-//cancel/unregister the handler
-export function animate(time) {
-	var id = requestAnimationFrame(animate)
-
-	var result = TWEEN.update(time)
-
-	if (!result) cancelAnimationFrame(id)
+	loop(performance.now())
 }
diff --git a/examples/example-projects/plain-javascript-modules/index.js b/examples/example-projects/plain-javascript-modules/index.js
index 28875333..7383963b 100644
--- a/examples/example-projects/plain-javascript-modules/index.js
+++ b/examples/example-projects/plain-javascript-modules/index.js
@@ -3,15 +3,17 @@ import * as TWEEN from '@tweenjs/tween.js'
 // For sake of example, we put animate() in a separate file, and import it into index.js.
 import {animate} from './animate.js'
 
+const group = new TWEEN.Group()
+
 const position = {x: 100, y: 100, rotation: 10}
 const target = document.getElementById('target')
-const tween = new TWEEN.Tween(position)
+const tween = new TWEEN.Tween(position, group)
 	.to({x: 700, y: 200, rotation: 359}, 2000)
 	.delay(1000)
 	.easing(TWEEN.Easing.Elastic.InOut)
 	.onUpdate(update)
 
-const tweenBack = new TWEEN.Tween(position)
+const tweenBack = new TWEEN.Tween(position, group)
 	.to({x: 100, y: 100, rotation: 10}, 3000)
 	.easing(TWEEN.Easing.Elastic.InOut)
 	.onUpdate(update)
@@ -21,7 +23,7 @@ tweenBack.chain(tween)
 
 tween.start()
 
-animate(performance.now())
+animate(group)
 
 function update() {
 	target.style.transform = `translate3d(${position.x}px, ${position.y}px, 0.0001px) rotateY(${Math.floor(position.rotation)}deg)`
diff --git a/examples/example-projects/plain-typescript-modules/animate.js b/examples/example-projects/plain-typescript-modules/animate.js
index ebb4dab8..aedda112 100644
--- a/examples/example-projects/plain-typescript-modules/animate.js
+++ b/examples/example-projects/plain-typescript-modules/animate.js
@@ -1,10 +1,9 @@
-// For sake of example, we put animate() in a separate file, and import it into index.ts.
-import * as TWEEN from '@tweenjs/tween.js';
-//If we register the callback animate, but the TWEEN.update(time) returns false,
-//cancel/unregister the handler
-export function animate(time) {
-    var id = requestAnimationFrame(animate);
-    var result = TWEEN.update(time);
-    if (!result)
-        cancelAnimationFrame(id);
+export function animate(group) {
+    function loop(time) {
+        group.update(time);
+        const stopped = group.allStopped();
+        if (!stopped)
+            requestAnimationFrame(loop);
+    }
+    loop(performance.now());
 }
diff --git a/examples/example-projects/plain-typescript-modules/animate.ts b/examples/example-projects/plain-typescript-modules/animate.ts
index d23ad2de..7cc034df 100644
--- a/examples/example-projects/plain-typescript-modules/animate.ts
+++ b/examples/example-projects/plain-typescript-modules/animate.ts
@@ -1,12 +1,11 @@
-// For sake of example, we put animate() in a separate file, and import it into index.ts.
-import * as TWEEN from '@tweenjs/tween.js'
+import type {Group} from '@tweenjs/tween.js'
 
-//If we register the callback animate, but the TWEEN.update(time) returns false,
-//cancel/unregister the handler
-export function animate(time) {
-	var id = requestAnimationFrame(animate)
+export function animate(group: Group) {
+	function loop(time: number) {
+		group.update(time)
+		const stopped = group.allStopped()
+		if (!stopped) requestAnimationFrame(loop)
+	}
 
-	var result = TWEEN.update(time)
-
-	if (!result) cancelAnimationFrame(id)
+	loop(performance.now())
 }
diff --git a/examples/example-projects/plain-typescript-modules/index.js b/examples/example-projects/plain-typescript-modules/index.js
index e94ee08d..4ab58afc 100644
--- a/examples/example-projects/plain-typescript-modules/index.js
+++ b/examples/example-projects/plain-typescript-modules/index.js
@@ -1,26 +1,23 @@
 import * as TWEEN from '@tweenjs/tween.js';
-// For sake of example, we put animate() in a separate file, and import it into
-// index.ts.
-//
-// Use a `.js` extension here because TS does not transform import specifiers,
-// and plain JS will need the extension by default. Find it ugly? Get used to it
-// and move on!
+// For sake of example, we put animate() in a separate file, and import it into index.ts.
+// Note the extension needs to be .js, as TypeScript does modify the import specifiers, and .js is needed once the file is converted to plain JS.
 import { animate } from './animate.js';
-var position = { x: 100, y: 100, rotation: 10 };
-var target = document.getElementById('target');
-var tween = new TWEEN.Tween(position)
+const group = new TWEEN.Group();
+const position = { x: 100, y: 100, rotation: 10 };
+const target = document.getElementById('target');
+const tween = new TWEEN.Tween(position, group)
     .to({ x: 700, y: 200, rotation: 359 }, 2000)
     .delay(1000)
     .easing(TWEEN.Easing.Elastic.InOut)
     .onUpdate(update);
-var tweenBack = new TWEEN.Tween(position)
+const tweenBack = new TWEEN.Tween(position, group)
     .to({ x: 100, y: 100, rotation: 10 }, 3000)
     .easing(TWEEN.Easing.Elastic.InOut)
     .onUpdate(update);
 tween.chain(tweenBack);
 tweenBack.chain(tween);
 tween.start();
-animate(performance.now());
+animate(group);
 function update() {
-    target.style.transform = "translate3d(".concat(position.x, "px, ").concat(position.y, "px, 0.0001px) rotateY(").concat(Math.floor(position.rotation), "deg)");
+    target.style.transform = `translate3d(${position.x}px, ${position.y}px, 0.0001px) rotateY(${Math.floor(position.rotation)}deg)`;
 }
diff --git a/examples/example-projects/plain-typescript-modules/index.ts b/examples/example-projects/plain-typescript-modules/index.ts
index b75962fa..c22240c0 100644
--- a/examples/example-projects/plain-typescript-modules/index.ts
+++ b/examples/example-projects/plain-typescript-modules/index.ts
@@ -1,21 +1,20 @@
 import * as TWEEN from '@tweenjs/tween.js'
 
 // For sake of example, we put animate() in a separate file, and import it into index.ts.
-//
-// Use a `.js` extension here because TS does not transform import specifiers,
-// and plain JS will need the extension by default. Find it ugly? Get used to it
-// and move on!
+// Note the extension needs to be .js, as TypeScript does modify the import specifiers, and .js is needed once the file is converted to plain JS.
 import {animate} from './animate.js'
 
+const group = new TWEEN.Group()
+
 const position = {x: 100, y: 100, rotation: 10}
 const target = document.getElementById('target')
-const tween = new TWEEN.Tween(position)
+const tween = new TWEEN.Tween(position, group)
 	.to({x: 700, y: 200, rotation: 359}, 2000)
 	.delay(1000)
 	.easing(TWEEN.Easing.Elastic.InOut)
 	.onUpdate(update)
 
-const tweenBack = new TWEEN.Tween(position)
+const tweenBack = new TWEEN.Tween(position, group)
 	.to({x: 100, y: 100, rotation: 10}, 3000)
 	.easing(TWEEN.Easing.Elastic.InOut)
 	.onUpdate(update)
@@ -25,7 +24,7 @@ tweenBack.chain(tween)
 
 tween.start()
 
-animate(performance.now())
+animate(group)
 
 function update() {
 	target.style.transform = `translate3d(${position.x}px, ${position.y}px, 0.0001px) rotateY(${Math.floor(position.rotation)}deg)`
diff --git a/examples/example-projects/plain-typescript-modules/tsconfig.json b/examples/example-projects/plain-typescript-modules/tsconfig.json
index 8632d7b5..759e87a4 100644
--- a/examples/example-projects/plain-typescript-modules/tsconfig.json
+++ b/examples/example-projects/plain-typescript-modules/tsconfig.json
@@ -1,7 +1,8 @@
 {
 	"compilerOptions": {
 		"module": "ESNext",
-		"moduleResolution": "node"
+		"moduleResolution": "node",
+		"target": "ESNext"
 	},
 	"include": ["./**/*.ts"]
 }
diff --git a/examples/js/createGraph.js b/examples/js/createGraph.js
index 5e4ea21d..6c36d258 100644
--- a/examples/js/createGraph.js
+++ b/examples/js/createGraph.js
@@ -1,19 +1,23 @@
-const toPhysicalPx = cssPx => cssPx * devicePixelRatio
+// @ts-check
+import {Tween, Easing} from '../../dist/tween.esm.js'
+import {toPhysicalPx} from './toPhysicalPx.js'
 
-function createGraph(text, easingFn, width = 180, height = 100) {
-	var div = document.createElement('div')
+export function createGraph(group, text, easingFn, width = 180, height = 100) {
+	const div = document.createElement('div')
 	div.style.display = 'inline-block'
 	// +20 for padding
 	div.style.width = width + 20 + 'px'
 	div.style.height = height + 20 + 'px'
 
-	var canvas = document.createElement('canvas')
+	const canvas = document.createElement('canvas')
 	canvas.style.width = width + 'px'
 	canvas.style.height = height + 'px'
 	canvas.width = toPhysicalPx(width)
 	canvas.height = toPhysicalPx(height)
 
-	var context = canvas.getContext('2d')
+	const context = canvas.getContext('2d')
+	if (!context) throw 'impossible'
+
 	context.fillStyle = 'rgb(250,250,250)'
 	context.fillRect(0, 0, toPhysicalPx(width), toPhysicalPx(height))
 
@@ -34,13 +38,14 @@ function createGraph(text, easingFn, width = 180, height = 100) {
 	context.moveTo(toPhysicalPx(5), toPhysicalPx(80))
 	context.lineCap = 'round'
 
-	var position = {x: toPhysicalPx(5), y: toPhysicalPx(80)}
+	const position = {x: toPhysicalPx(5), y: toPhysicalPx(80)}
 
-	new TWEEN.Tween(position)
+	new Tween(position, group)
 		.to({x: toPhysicalPx(175)}, 2000)
-		.easing(TWEEN.Easing.Linear.None)
+		.easing(Easing.Linear.None)
 		.start()
-	new TWEEN.Tween(position)
+
+	new Tween(position, group)
 		.to({y: toPhysicalPx(20)}, 2000)
 		.easing(easingFn)
 		.onUpdate(function () {
diff --git a/examples/js/createPath.js b/examples/js/createPath.js
new file mode 100644
index 00000000..2ba05c26
--- /dev/null
+++ b/examples/js/createPath.js
@@ -0,0 +1,101 @@
+// @ts-check
+import {Tween, Easing} from '../../dist/tween.esm.js'
+import {toPhysicalPx} from './toPhysicalPx.js'
+
+const width = 240,
+	height = 160
+
+// random points
+
+/*
+export const x0 = Math.random() * (width - 40) + 20,
+	y0 = Math.random() * (height - 40) + 20,
+	xA = [],
+	yA = []
+
+for (const i = 0; i < 10; i++) {
+	xA.push(Math.random() * (width - 40) + 20)
+	yA.push(Math.random() * (height - 40) + 20)
+}
+*/
+
+// fixed points
+
+export const min = 1 / 6,
+	max = 5 / 6
+
+export const x0 = width * min,
+	y0 = height / 2,
+	xA = [width * max, width / 2],
+	yA = [height * min, height * max]
+
+export function createPath(group, text, interpolation, width = 240, height = 160) {
+	const div = document.createElement('div')
+	div.style.display = 'inline-block'
+	// +20 for padding
+	div.style.width = width + 20 + 'px'
+	div.style.height = height + 20 + 'px'
+
+	const canvas = document.createElement('canvas')
+	canvas.style.width = width + 'px'
+	canvas.style.height = height + 'px'
+	canvas.width = toPhysicalPx(width)
+	canvas.height = toPhysicalPx(height)
+
+	const context = canvas.getContext('2d')
+	if (!context) throw 'doh'
+	context.fillStyle = 'rgb(250,250,250)'
+	context.fillRect(0, 0, toPhysicalPx(width), toPhysicalPx(height))
+
+	context.lineWidth = toPhysicalPx(1)
+	context.strokeStyle = 'rgb(230,230,230)'
+
+	// points
+	context.fillStyle = 'rgb(200,200,200)'
+	context.fillRect(
+		toPhysicalPx(x0) - toPhysicalPx(3),
+		toPhysicalPx(y0) - toPhysicalPx(3),
+		toPhysicalPx(6),
+		toPhysicalPx(6),
+	)
+	context.fillRect(
+		toPhysicalPx(xA[xA.length - 1]) - toPhysicalPx(3),
+		toPhysicalPx(yA[yA.length - 1]) - toPhysicalPx(3),
+		toPhysicalPx(6),
+		toPhysicalPx(6),
+	)
+
+	for (let i = 0; i < xA.length; i++) {
+		context.fillRect(
+			toPhysicalPx(xA[i]) - toPhysicalPx(2),
+			toPhysicalPx(yA[i]) - toPhysicalPx(2),
+			toPhysicalPx(4),
+			toPhysicalPx(4),
+		)
+	}
+	//
+
+	context.lineWidth = toPhysicalPx(2)
+	context.strokeStyle = 'rgba(255,127,127,0.9)'
+	context.beginPath()
+	context.moveTo(toPhysicalPx(x0), toPhysicalPx(y0))
+	context.lineCap = 'round'
+
+	const position = {x: x0, y: y0}
+
+	new Tween(position, group)
+		.to({x: xA, y: yA}, 3000)
+		.easing(Easing.Linear.None)
+		.interpolation(interpolation)
+		.onUpdate(function () {
+			context.lineTo(toPhysicalPx(position.x), toPhysicalPx(position.y))
+			context.stroke()
+		})
+		.start()
+
+	div.appendChild(document.createTextNode(text))
+	div.appendChild(document.createElement('br'))
+	div.appendChild(canvas)
+
+	return div
+}
diff --git a/examples/js/toPhysicalPx.js b/examples/js/toPhysicalPx.js
new file mode 100644
index 00000000..ee979f57
--- /dev/null
+++ b/examples/js/toPhysicalPx.js
@@ -0,0 +1 @@
+export const toPhysicalPx = cssPx => cssPx * devicePixelRatio
diff --git a/src/Group.ts b/src/Group.ts
index 21973e19..1fbae2a7 100644
--- a/src/Group.ts
+++ b/src/Group.ts
@@ -1,5 +1,5 @@
 import now from './Now'
-import type {Tween, UnknownProps} from './Tween'
+import type {Tween} from './Tween'
 
 /**
  * Controlling groups of tweens
@@ -8,40 +8,63 @@ import type {Tween, UnknownProps} from './Tween'
  * In these cases, you may want to create your own smaller groups of tween
  */
 export default class Group {
-	private _tweens: {
-		[key: string]: Tween<UnknownProps>
-	} = {}
-
-	private _tweensAddedDuringUpdate: {
-		[key: string]: Tween<UnknownProps>
-	} = {}
-
-	getAll(): Array<Tween<UnknownProps>> {
-		return Object.keys(this._tweens).map(tweenId => {
-			return this._tweens[tweenId]
-		})
+	private _tweens: Record<string, Tween> = {}
+	private _tweensAddedDuringUpdate: Record<string, Tween> = {}
+
+	constructor(...tweens: Tween[]) {
+		this.add(...tweens)
+	}
+
+	getAll(): Array<Tween> {
+		return Object.keys(this._tweens).map(tweenId => this._tweens[tweenId])
 	}
 
 	removeAll(): void {
 		this._tweens = {}
 	}
 
-	add(tween: Tween<UnknownProps>): void {
-		this._tweens[tween.getId()] = tween
-		this._tweensAddedDuringUpdate[tween.getId()] = tween
+	add(...tweens: Tween[]): void {
+		for (const tween of tweens) {
+			// Remove from any other group first, a tween can only be in one group at a time.
+			// @ts-expect-error library internal access
+			tween._group?.remove(tween)
+
+			// @ts-expect-error library internal access
+			tween._group = this
+
+			this._tweens[tween.getId()] = tween
+			this._tweensAddedDuringUpdate[tween.getId()] = tween
+		}
+	}
+
+	remove(...tweens: Tween[]): void {
+		for (const tween of tweens) {
+			// @ts-expect-error library internal access
+			tween._group = undefined
+
+			delete this._tweens[tween.getId()]
+			delete this._tweensAddedDuringUpdate[tween.getId()]
+		}
 	}
 
-	remove(tween: Tween<UnknownProps>): void {
-		delete this._tweens[tween.getId()]
-		delete this._tweensAddedDuringUpdate[tween.getId()]
+	/** Return true if all tweens in the group are not paused or playing. */
+	allStopped() {
+		return this.getAll().every(tween => !tween.isPlaying())
 	}
 
-	update(time: number = now(), preserve = false): boolean {
+	update(time?: number): void
+	/**
+	 * @deprecated The `preserve` parameter is now defaulted to `true` and will
+	 * be removed in a future major release, at which point all tweens of a
+	 * group will always be preserved when calling update. To migrate, always
+	 * use `group.add(tween)` or `group.remove(tween)` to manually add or remove
+	 * tweens, and do not rely on tweens being automatically added or removed.
+	 */
+	update(time?: number, preserve?: boolean): void
+	update(time: number = now(), preserve = true): void {
 		let 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.
@@ -55,14 +78,10 @@ export default class Group {
 				const tween = this._tweens[tweenIds[i]]
 				const 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
 	}
 }
diff --git a/src/Index.ts b/src/Index.ts
index 0fc403c5..3755cd97 100644
--- a/src/Index.ts
+++ b/src/Index.ts
@@ -30,10 +30,245 @@ const 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)
+ * })
+ * ```
+ */
 const 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)
+ * })
+ * ```
+ */
 const 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)
+ * })
+ * ```
+ */
 const 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)
+ * })
+ * ```
+ */
 const 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)
+ * })
+ * ```
+ */
 const update = TWEEN.update.bind(TWEEN)
 
 // NOTE! Make sure both lists of exports below are kept in sync:
@@ -49,10 +284,246 @@ const exports = {
 	nextId,
 	Tween,
 	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,
+	/**
+	 * @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,
+	/**
+	 * @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,
+	/**
+	 * @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,
+	/**
+	 * @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,
 }
 
diff --git a/src/Tween.ts b/src/Tween.ts
index 2cc49bb0..878a84e0 100644
--- a/src/Tween.ts
+++ b/src/Tween.ts
@@ -17,7 +17,7 @@ import type {EasingFunction} from './Easing'
 import type {InterpolationFunction} from './Interpolation'
 import type Group from './Group'
 
-export class Tween<T extends UnknownProps> {
+export class Tween<T extends UnknownProps = any> {
 	private _isPaused = false
 	private _pauseStart = 0
 	private _valuesStart: UnknownProps = {}
@@ -48,11 +48,34 @@ export class Tween<T extends UnknownProps> {
 	private _id = Sequence.nextId()
 	private _isChainStopped = false
 	private _propertiesAreSetUp = false
+	private _object: T
+	private _group?: Group
 
-	constructor(
-		private _object: T,
-		private _group: Group | false = mainGroup,
-	) {}
+	/**
+	 * @param object - The object whose properties this Tween will animate.
+	 * @param group - The object whose properties this Tween will animate.
+	 */
+	constructor(object: T, group?: Group)
+	/**
+	 * @deprecated The group parameter is now deprecated, instead use `new
+	 * Tween(object)` then `group.add(tween)` to add a tween to a group. Use
+	 * `new Tween(object, true)` to restore the old behavior for now, but this
+	 * will be removed in the future.
+	 */
+	constructor(object: T, group: true)
+	constructor(object: T, group?: Group | true) {
+		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)
+		}
+	}
 
 	getId(): number {
 		return this._id
@@ -96,9 +119,6 @@ export class Tween<T extends UnknownProps> {
 			return this
 		}
 
-		// eslint-disable-next-line
-		this._group && this._group.add(this as any)
-
 		this._repeat = this._initialRepeat
 
 		if (this._reversed) {
@@ -259,9 +279,6 @@ export class Tween<T extends UnknownProps> {
 			return this
 		}
 
-		// eslint-disable-next-line
-		this._group && this._group.remove(this as any)
-
 		this._isPlaying = false
 
 		this._isPaused = false
@@ -288,9 +305,6 @@ export class Tween<T extends UnknownProps> {
 
 		this._pauseStart = time
 
-		// eslint-disable-next-line
-		this._group && this._group.remove(this as any)
-
 		return this
 	}
 
@@ -305,9 +319,6 @@ export class Tween<T extends UnknownProps> {
 
 		this._pauseStart = 0
 
-		// eslint-disable-next-line
-		this._group && this._group.add(this as any)
-
 		return this
 	}
 
@@ -318,8 +329,31 @@ export class Tween<T extends UnknownProps> {
 		return this
 	}
 
-	group(group = mainGroup): this {
-		this._group = group
+	/**
+	 * Removes the tween from the current group it is in, if any, then adds the
+	 * tween to the specified `group`.
+	 */
+	group(group: Group): this
+	/**
+	 * @deprecated The argless call signature has been removed. Use
+	 * `tween.group(group)` or `group.add(tween)`, instead.
+	 */
+	group(): this
+	group(group?: Group): this {
+		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.
+	 */
+	remove() {
+		this._group?.remove(this)
 		return this
 	}
 
@@ -402,11 +436,9 @@ export class Tween<T extends UnknownProps> {
 
 		let property
 
-		const endTime = this._startTime + this._duration
-
 		if (!this._goToEnd && !this._isPlaying) {
-			if (time > endTime) return false
 			if (autoStart) this.start(time, true)
+			else return false
 		}
 
 		this._goToEnd = false
diff --git a/src/tests.ts b/src/tests.ts
index 6fbcd744..edcfd6cd 100644
--- a/src/tests.ts
+++ b/src/tests.ts
@@ -16,7 +16,7 @@ export const tests = {
 
 	'TWEEN object stores tweens automatically on start'(test: Test): void {
 		const numTweensBefore = TWEEN.getAll().length,
-			t = new TWEEN.Tween({})
+			t = new TWEEN.Tween({}, true)
 
 		t.start()
 
@@ -27,7 +27,7 @@ export const tests = {
 	},
 
 	'TWEEN.removeAll()'(test: Test): void {
-		const t = new TWEEN.Tween({})
+		const t = new TWEEN.Tween({}, true)
 
 		TWEEN.removeAll()
 
@@ -35,7 +35,11 @@ export const tests = {
 
 		t.start()
 
-		test.equal(TWEEN.getAll().length, 1, 'A tween has been added')
+		test.equal(TWEEN.getAll().length, 0, 'Tweens are not automatically added/removed')
+
+		TWEEN.add(t)
+
+		test.equal(TWEEN.getAll().length, 1, 'A tween has to be manually added')
 
 		TWEEN.removeAll()
 
@@ -46,7 +50,7 @@ export const tests = {
 	'TWEEN.add()'(test: Test): void {
 		const all = TWEEN.getAll(),
 			numTweens = all.length,
-			t = new TWEEN.Tween({})
+			t = new TWEEN.Tween({}, true)
 
 		TWEEN.add(t)
 
@@ -58,7 +62,7 @@ export const tests = {
 	'TWEEN.remove()'(test: Test): void {
 		const all = TWEEN.getAll(),
 			numTweens = all.length,
-			t = new TWEEN.Tween({})
+			t = new TWEEN.Tween({}, true)
 
 		TWEEN.add(t)
 
@@ -71,71 +75,54 @@ export const tests = {
 		test.done()
 	},
 
-	'TWEEN.update() returns false when done (no tweens to animate)'(test: Test): void {
+	'TWEEN.update() removes tweens when they are finished only if preserve is set to false'(test: Test): void {
 		TWEEN.removeAll()
 
-		test.deepEqual(TWEEN.update(), false)
-		test.done()
-	},
-
-	'TWEEN.update() returns true when there are active tweens'(test: Test): void {
-		TWEEN.removeAll()
+		const t1 = new TWEEN.Tween({}, true).to({}, 1000),
+			t2 = new TWEEN.Tween({}, true).to({}, 2000)
 
-		const t = new TWEEN.Tween({})
-		t.start()
-
-		test.deepEqual(TWEEN.update(), true)
-		test.done()
-	},
-
-	'TWEEN.update() removes tweens when they are finished'(test: Test): void {
-		TWEEN.removeAll()
-
-		const t1 = new TWEEN.Tween({}).to({}, 1000),
-			t2 = new TWEEN.Tween({}).to({}, 2000)
-
-		test.equal(TWEEN.getAll().length, 0)
+		test.equal(TWEEN.getAll().length, 2)
 
 		t1.start(0)
 		t2.start(0)
 
 		test.equal(TWEEN.getAll().length, 2)
 
-		TWEEN.update(0)
+		TWEEN.update(0, false)
 		test.equal(TWEEN.getAll().length, 2)
 
-		TWEEN.update(999)
+		TWEEN.update(999, false)
 		test.equal(TWEEN.getAll().length, 2)
 
-		TWEEN.update(1000)
+		TWEEN.update(1000, false)
 		test.equal(TWEEN.getAll().length, 1)
 		test.equal(TWEEN.getAll().indexOf(t1), -1)
 		test.ok(TWEEN.getAll().indexOf(t2) != -1)
 		test.done()
 	},
-	'TWEEN.update() does not remove tweens when they are finished with preserve flag'(test: Test): void {
+	'TWEEN.update() does not remove tweens when they are finished with preserve true (default)'(test: Test): void {
 		TWEEN.removeAll()
 
-		const t1 = new TWEEN.Tween({}).to({}, 1000),
-			t2 = new TWEEN.Tween({}).to({}, 2000)
+		const t1 = new TWEEN.Tween({}, true).to({}, 1000),
+			t2 = new TWEEN.Tween({}, true).to({}, 2000)
 
-		test.equal(TWEEN.getAll().length, 0)
+		test.equal(TWEEN.getAll().length, 2)
 
 		t1.start(0)
 		t2.start(0)
 
 		test.equal(TWEEN.getAll().length, 2)
 
-		TWEEN.update(0, true)
+		TWEEN.update(0)
 		test.equal(TWEEN.getAll().length, 2)
 
-		TWEEN.update(999, true)
+		TWEEN.update(999)
 		test.equal(TWEEN.getAll().length, 2)
 
-		TWEEN.update(1000, true)
+		TWEEN.update(1000)
 		test.equal(TWEEN.getAll().length, 2)
 
-		TWEEN.update(1001, true)
+		TWEEN.update(1001)
 		test.equal(TWEEN.getAll().length, 2)
 		test.ok(TWEEN.getAll().indexOf(t1) != -1)
 		test.ok(TWEEN.getAll().indexOf(t2) != -1)
@@ -148,20 +135,30 @@ export const tests = {
 		const target1 = {a: 0}
 		const target2 = {b: 0}
 
-		const t1 = new TWEEN.Tween(target1).to({a: 1}, 1000),
-			t2 = new TWEEN.Tween(target2).to({b: 1}, 2000)
+		const t1 = new TWEEN.Tween(target1, true).to({a: 1}, 1000),
+			t2 = new TWEEN.Tween(target2, true).to({b: 1}, 2000)
 
 		t1.start(0)
 		t2.start(0)
 
 		// To be able to make a tween go backward in time, it must be
-		// updated with preserve set to true. Otherwise, the
+		// updated with preserve set to true (default). Otherwise, the
 		// backward-in-time feature does not apply.
 		TWEEN.update(200, true)
 		TWEEN.update(2500, true)
-		TWEEN.update(500, true)
 
 		test.equal(TWEEN.getAll().length, 2)
+
+		// If you want to go backward in time, start back at the beginning
+		// first, then go to any time between the start and end time.
+		t1.start(0)
+		t2.start(0)
+
+		TWEEN.update(750, true)
+		test.equal(target1.a, 0.75)
+		test.equal(target2.b, 0.375)
+
+		TWEEN.update(500)
 		test.equal(target1.a, 0.5)
 		test.equal(target2.b, 0.25)
 
@@ -507,18 +504,18 @@ export const tests = {
 	},
 
 	'Test TWEEN.Tween.start()'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {},
-			t = new TWEEN.Tween(obj)
+			t = new TWEEN.Tween(obj, true)
 
 		t.to({}, 1000)
 
-		TWEEN.removeAll()
-		test.equal(TWEEN.getAll().length, 0) // TODO move to TWEEN test
+		test.equal(TWEEN.getAll().length, 1)
 
 		t.start(0)
 
-		test.equal(TWEEN.getAll().length, 1) // TODO ditto
-		test.equal(TWEEN.getAll()[0], t)
+		test.equal(TWEEN.getAll().length, 1)
 		test.done()
 	},
 
@@ -585,17 +582,18 @@ export const tests = {
 	},
 
 	'Test TWEEN.Tween.stop()'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {},
-			t = new TWEEN.Tween(obj)
+			t = new TWEEN.Tween(obj, true)
 
 		t.to({x: 2}, 1000)
 
-		TWEEN.removeAll()
-
 		t.start()
-		t.stop()
+		test.equal(TWEEN.getAll().length, 1)
 
-		test.equal(TWEEN.getAll().length, 0)
+		t.stop()
+		test.equal(TWEEN.getAll().length, 1)
 		test.done()
 	},
 
@@ -828,14 +826,14 @@ export const tests = {
 	},
 
 	'Test TWEEN.Tween.chain --with one tween'(test: Test): void {
-		const t = new TWEEN.Tween({}),
-			t2 = new TWEEN.Tween({})
+		TWEEN.removeAll()
+
+		const t = new TWEEN.Tween({}, true),
+			t2 = new TWEEN.Tween({}, true)
 		let tStarted = false,
 			tCompleted = false,
 			t2Started = false
 
-		TWEEN.removeAll()
-
 		t.to({}, 1000)
 		t2.to({}, 1000)
 
@@ -876,13 +874,13 @@ export const tests = {
 	},
 
 	'Test TWEEN.Tween.chain --with several tweens in an array'(test: Test): void {
-		const t = new TWEEN.Tween({}),
+		TWEEN.removeAll()
+
+		const t = new TWEEN.Tween({}, true),
 			chainedTweens: TWEEN.Tween<any>[] = [],
 			numChained = 3
 		let numChainedStarted = 0
 
-		TWEEN.removeAll()
-
 		t.to({}, 1000)
 
 		function onChainedStart(): void {
@@ -890,7 +888,7 @@ export const tests = {
 		}
 
 		for (let i = 0; i < numChained; i++) {
-			const chained = new TWEEN.Tween({})
+			const chained = new TWEEN.Tween({}, true)
 			chained.to({}, 1000)
 
 			chainedTweens.push(chained)
@@ -912,12 +910,12 @@ export const tests = {
 	},
 
 	'Test TWEEN.Tween.chain allows endless loops'(test: Test): void {
-		const obj = {x: 0},
-			t1 = new TWEEN.Tween(obj).to({x: 100}, 1000),
-			t2 = new TWEEN.Tween(obj).to({x: 0}, 1000)
-
 		TWEEN.removeAll()
 
+		const obj = {x: 0},
+			t1 = new TWEEN.Tween(obj, true).to({x: 100}, 1000),
+			t2 = new TWEEN.Tween(obj, true).to({x: 0}, 1000)
+
 		t1.chain(t2)
 		t2.chain(t1)
 
@@ -954,8 +952,8 @@ export const tests = {
 		// Repeat the same test but with the tweens added in the
 		// opposite order.
 		const obj2 = {x: 0}
-		const t3 = new TWEEN.Tween(obj2).to({x: 200}, 1000)
-		const t4 = new TWEEN.Tween(obj2).to({x: 100}, 1000)
+		const t3 = new TWEEN.Tween(obj2, true).to({x: 200}, 1000)
+		const t4 = new TWEEN.Tween(obj2, true).to({x: 100}, 1000)
 
 		t4.chain(t3)
 		t3.chain(t4)
@@ -998,11 +996,11 @@ export const tests = {
 	},
 
 	'Test TWEEN.Tween.startFromCurrentValues'(test: Test): void {
-		const obj = {x: 0},
-			t = new TWEEN.Tween(obj).to({x: 100})
-
 		TWEEN.removeAll()
 
+		const obj = {x: 0},
+			t = new TWEEN.Tween(obj, true).to({x: 100})
+
 		test.equal(obj.x, 0)
 
 		// x == 0
@@ -1031,8 +1029,10 @@ export const tests = {
 	},
 
 	'Test TWEEN.Tween.onStart'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {},
-			t = new TWEEN.Tween(obj)
+			t = new TWEEN.Tween(obj, true)
 		let counter = 0
 
 		t.to({x: 2}, 1000)
@@ -1055,8 +1055,10 @@ export const tests = {
 	},
 
 	'Test TWEEN.Tween.onEveryStart'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {},
-			t = new TWEEN.Tween(obj)
+			t = new TWEEN.Tween(obj, true)
 		let counter = 0
 
 		t.to({x: 2}, 500)
@@ -1085,8 +1087,10 @@ export const tests = {
 	},
 
 	'Test TWEEN.Tween.onStop'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {},
-			t = new TWEEN.Tween(obj)
+			t = new TWEEN.Tween(obj, true)
 		let counter = 0
 
 		t.to({x: 2}, 1000)
@@ -1116,8 +1120,10 @@ export const tests = {
 	},
 
 	'Test TWEEN.Tween.onUpdate'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {},
-			t = new TWEEN.Tween(obj)
+			t = new TWEEN.Tween(obj, true)
 		let counter = 0
 
 		t.to({x: 2}, 1000)
@@ -1148,8 +1154,10 @@ export const tests = {
 	},
 
 	'Test TWEEN.Tween.onComplete'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {},
-			t = new TWEEN.Tween(obj)
+			t = new TWEEN.Tween(obj, true)
 		let counter = 0
 
 		t.to({x: 2}, 1000)
@@ -1182,7 +1190,7 @@ export const tests = {
 		TWEEN.removeAll()
 
 		const obj = {x: 0},
-			t = new TWEEN.Tween(obj).to({x: 100}, 100)
+			t = new TWEEN.Tween(obj, true).to({x: 100}, 100)
 
 		t.start(0)
 
@@ -1204,7 +1212,7 @@ export const tests = {
 		TWEEN.removeAll()
 
 		const obj = {x: 0},
-			t = new TWEEN.Tween(obj).to({x: 100}, 100).repeat(1)
+			t = new TWEEN.Tween(obj, true).to({x: 100}, 100).repeat(1)
 
 		t.start(0)
 
@@ -1229,7 +1237,7 @@ export const tests = {
 		TWEEN.removeAll()
 
 		const obj = {x: 0},
-			t = new TWEEN.Tween(obj).to({x: 100}, 100).repeat(Infinity)
+			t = new TWEEN.Tween(obj, true).to({x: 100}, 100).repeat(Infinity)
 
 		t.start(0)
 
@@ -1257,7 +1265,7 @@ export const tests = {
 		TWEEN.removeAll()
 
 		const obj = {x: 0, y: 0},
-			t = new TWEEN.Tween(obj).to({x: '+100', y: '-100'}, 100).repeat(1)
+			t = new TWEEN.Tween(obj, true).to({x: '+100', y: '-100'}, 100).repeat(1)
 
 		t.start(0)
 
@@ -1287,7 +1295,7 @@ export const tests = {
 		TWEEN.removeAll()
 
 		const obj = {x: 0},
-			t = new TWEEN.Tween(obj).to({x: 100}, 100).repeat(Infinity).yoyo(true)
+			t = new TWEEN.Tween(obj, true).to({x: 100}, 100).repeat(Infinity).yoyo(true)
 
 		t.start(0)
 
@@ -1315,7 +1323,7 @@ export const tests = {
 		TWEEN.removeAll()
 
 		const obj = {x: 0},
-			t = new TWEEN.Tween(obj).to({x: 100}, 100).repeat(1).yoyo(true)
+			t = new TWEEN.Tween(obj, true).to({x: 100}, 100).repeat(1).yoyo(true)
 
 		t.start(0)
 
@@ -1343,7 +1351,7 @@ export const tests = {
 		TWEEN.removeAll()
 
 		const obj = {x: 0},
-			t = new TWEEN.Tween(obj)
+			t = new TWEEN.Tween(obj, true)
 				.to({x: [100, 200]}, 100)
 				.repeat(1)
 				.yoyo(true)
@@ -1369,7 +1377,7 @@ export const tests = {
 		TWEEN.removeAll()
 
 		const obj = {x: 0},
-			t = new TWEEN.Tween(obj).to({x: 100}, 100).repeat(1).yoyo(true)
+			t = new TWEEN.Tween(obj, true).to({x: 100}, 100).repeat(1).yoyo(true)
 
 		t.start(0)
 
@@ -1410,14 +1418,14 @@ export const tests = {
 	},
 
 	'Test TWEEN.Tween.stopChainedTweens()'(test: Test): void {
-		const t = new TWEEN.Tween({}),
-			t2 = new TWEEN.Tween({})
+		TWEEN.removeAll()
+
+		const t = new TWEEN.Tween({}, true),
+			t2 = new TWEEN.Tween({}, true)
 		let tStarted = false,
 			tCompleted = false,
 			t2Started = false
 
-		TWEEN.removeAll()
-
 		t.to({}, 1000)
 		t2.delay(500).to({}, 1000)
 
@@ -1448,19 +1456,25 @@ export const tests = {
 
 		test.equal(tStarted, true)
 		test.equal(t2Started, false)
-		test.equal(TWEEN.getAll().length, 0)
+		test.equal(TWEEN.getAll().length, 2)
+
+		TWEEN.update(1501)
+
+		test.equal(t2Started, false)
 
 		test.done()
 	},
 
 	'Test TWEEN.Tween.chain progressess into chained tweens'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {t: 1000}
 
 		// 1000 of nothing
-		const blank = new TWEEN.Tween({}).to({}, 1000)
+		const blank = new TWEEN.Tween({}, true).to({}, 1000)
 
 		// tween obj.t from 1000 -> 2000 (in time with update time)
-		const next = new TWEEN.Tween(obj).to({t: 2000}, 1000)
+		const next = new TWEEN.Tween(obj, true).to({t: 2000}, 1000)
 
 		blank.chain(next).start(0)
 
@@ -1540,7 +1554,7 @@ export const tests = {
 		TWEEN.removeAll()
 
 		const obj = {x: 0},
-			t = new TWEEN.Tween(obj).to({x: 100}, 100).repeat(1).delay(100)
+			t = new TWEEN.Tween(obj, true).to({x: 100}, 100).repeat(1).delay(100)
 
 		t.start(0)
 
@@ -1572,7 +1586,7 @@ export const tests = {
 		TWEEN.removeAll()
 
 		const obj = {x: 0},
-			t = new TWEEN.Tween(obj).to({x: 100}, 100).repeat(1).repeatDelay(200)
+			t = new TWEEN.Tween(obj, true).to({x: 100}, 100).repeat(1).repeatDelay(200)
 
 		t.start(0)
 
@@ -1604,7 +1618,7 @@ export const tests = {
 		TWEEN.removeAll()
 
 		const obj = {x: 0},
-			t = new TWEEN.Tween(obj).to({x: 100}, 100).delay(100).repeat(1).repeatDelay(200)
+			t = new TWEEN.Tween(obj, true).to({x: 100}, 100).delay(100).repeat(1).repeatDelay(200)
 
 		t.start(0)
 
@@ -1633,10 +1647,12 @@ export const tests = {
 	},
 
 	'TWEEN.Tween.onRepeat should not be called if repeat = 0 or default'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {x: 0}
 		let callbackCounter = 0
 
-		const t = new TWEEN.Tween(obj).to({x: 100}, 100).start(0)
+		const t = new TWEEN.Tween(obj, true).to({x: 100}, 100).start(0)
 		t.onRepeat(() => {
 			callbackCounter++
 		})
@@ -1655,10 +1671,12 @@ export const tests = {
 	},
 
 	'TWEEN.Tween.onRepeat should be called once if repeat = 1'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {x: 0}
 		let callbackCounter = 0
 
-		const t = new TWEEN.Tween(obj).to({x: 100}, 100).repeat(1).start(0)
+		const t = new TWEEN.Tween(obj, true).to({x: 100}, 100).repeat(1).start(0)
 		t.onRepeat(() => {
 			callbackCounter++
 		})
@@ -1683,10 +1701,12 @@ export const tests = {
 	},
 
 	'TWEEN.Tween.onRepeat should be called every time if repeat = Infinity'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {x: 0}
 		let callbackCounter = 0
 
-		const t = new TWEEN.Tween(obj).to({x: 100}, 100).repeat(Infinity).start(0)
+		const t = new TWEEN.Tween(obj, true).to({x: 100}, 100).repeat(Infinity).start(0)
 		t.onRepeat(() => {
 			callbackCounter++
 		})
@@ -1713,10 +1733,12 @@ export const tests = {
 	'TWEEN.Tween.onRepeat should not be called if Tween.pause() or Tween.stop(), and should be called after Tween.resume() or restart'(
 		test: Test,
 	): void {
+		TWEEN.removeAll()
+
 		const generateTween = () => {
 			const obj = {x: 0}
 			const counter = {count: 0}
-			const tween = new TWEEN.Tween(obj).to({x: 100}, 100).repeat(Infinity).start(0)
+			const tween = new TWEEN.Tween(obj, true).to({x: 100}, 100).repeat(Infinity).start(0)
 			tween.onRepeat(() => {
 				counter.count++
 			})
@@ -1730,37 +1752,39 @@ export const tests = {
 		const tweenStop = generateTween()
 
 		TWEEN.update(100)
-		test.equal(tweenPause.counter.count, 1)
-		test.equal(tweenStop.counter.count, 1)
+		test.equal(tweenPause.counter.count, 1, 'repeats after first completion')
+		test.equal(tweenStop.counter.count, 1, 'repeats after first completion')
 
 		TWEEN.update(200)
-		test.equal(tweenPause.counter.count, 2)
-		test.equal(tweenStop.counter.count, 2)
-		tweenPause.tween.pause(200)
+		test.equal(tweenPause.counter.count, 2, 'repeats after second completion')
+		test.equal(tweenStop.counter.count, 2, 'repeats after second completion')
 
+		tweenPause.tween.pause(200)
 		TWEEN.update(300)
-		test.equal(tweenPause.counter.count, 2)
-		test.equal(tweenStop.counter.count, 3)
+		test.equal(tweenPause.counter.count, 2, 'tween is paused hence it did not repeat')
+		test.equal(tweenStop.counter.count, 3, 'tween is not stopped hence it repeated')
+
 		tweenPause.tween.resume(300)
 		tweenStop.tween.stop()
-
 		TWEEN.update(400)
-		test.equal(tweenPause.counter.count, 3)
-		test.equal(tweenStop.counter.count, 3)
-		tweenStop.tween.start(400)
+		test.equal(tweenPause.counter.count, 3, 'tween is resumed so it repeated')
+		test.equal(tweenStop.counter.count, 3, 'tween was stopped hence it did not repeat')
 
+		tweenStop.tween.start(400)
 		TWEEN.update(500)
-		test.equal(tweenPause.counter.count, 4)
-		test.equal(tweenStop.counter.count, 4)
+		test.equal(tweenPause.counter.count, 4, 'tween is not paused hence it repeated')
+		test.equal(tweenStop.counter.count, 4, 'tween is not stopped hence it repeated')
 
 		test.done()
 	},
 
 	'If Tween.delay is set, TWEEN.Tween.onRepeat should be called when repeat section finished'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {x: 0}
 		let callbackCounter = 0
 
-		const t = new TWEEN.Tween(obj).to({x: 100}, 100).delay(50).repeat(1).start(0)
+		const t = new TWEEN.Tween(obj, true).to({x: 100}, 100).delay(50).repeat(1).start(0)
 		t.onRepeat(() => {
 			callbackCounter++
 		})
@@ -1801,10 +1825,12 @@ export const tests = {
 	},
 
 	'If Tween.repeatDelay is set, TWEEN.Tween.onRepeat should be called when repeat section finished'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {x: 0}
 		let callbackCounter = 0
 
-		const t = new TWEEN.Tween(obj).to({x: 100}, 100).repeatDelay(100).repeat(1).start(0)
+		const t = new TWEEN.Tween(obj, true).to({x: 100}, 100).repeatDelay(100).repeat(1).start(0)
 		t.onRepeat(() => {
 			callbackCounter++
 		})
@@ -1841,7 +1867,7 @@ export const tests = {
 		TWEEN.removeAll()
 
 		const obj = {x: 0},
-			t = new TWEEN.Tween(obj).to({x: 100}, 100).repeat(5).delay(100)
+			t = new TWEEN.Tween(obj, true).to({x: 100}, 100).repeat(5).delay(100)
 
 		t.start(0)
 
@@ -1880,7 +1906,7 @@ export const tests = {
 		TWEEN.removeAll()
 
 		const obj = {x: 0},
-			t = new TWEEN.Tween(obj).to({x: 100}, 100).repeat(5).delay(100)
+			t = new TWEEN.Tween(obj, true).to({x: 100}, 100).repeat(5).delay(100)
 
 		t.start(0)
 
@@ -1894,8 +1920,8 @@ export const tests = {
 	'Test browser tab sleep with delay'(test: Test) {
 		TWEEN.removeAll()
 
-		var obj = {x: 0},
-			t = new TWEEN.Tween(obj).to({x: 100}, 100).repeat(Infinity).delay(100)
+		const obj = {x: 0},
+			t = new TWEEN.Tween(obj, true).to({x: 100}, 100).repeat(Infinity).delay(100)
 
 		t.start(0)
 
@@ -1911,8 +1937,8 @@ export const tests = {
 	'Test browser tab sleep with repeatDelay'(test: Test) {
 		TWEEN.removeAll()
 
-		var obj = {x: 0},
-			t = new TWEEN.Tween(obj).to({x: 100}, 100).repeat(1).repeatDelay(200)
+		const obj = {x: 0},
+			t = new TWEEN.Tween(obj, true).to({x: 100}, 100).repeat(1).repeatDelay(200)
 
 		t.start(0)
 
@@ -1931,8 +1957,8 @@ export const tests = {
 	'Test browser tab sleep with repeatDelay and delay'(test: Test) {
 		TWEEN.removeAll()
 
-		var obj = {x: 0},
-			t = new TWEEN.Tween(obj).to({x: 100}, 100).delay(100).repeat(1).repeatDelay(200)
+		const obj = {x: 0},
+			t = new TWEEN.Tween(obj, true).to({x: 100}, 100).delay(100).repeat(1).repeatDelay(200)
 
 		t.start(0)
 
@@ -1949,6 +1975,8 @@ export const tests = {
 	},
 
 	'Tween.js compatible with Object.defineProperty getter / setters'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {_x: 0, x: 0}
 
 		Object.defineProperty(obj, 'x', {
@@ -1962,7 +1990,7 @@ export const tests = {
 
 		test.equal(obj.x, 0)
 
-		const t = new TWEEN.Tween(obj).to({x: 100}, 100)
+		const t = new TWEEN.Tween(obj, true).to({x: 100}, 100)
 
 		t.start(0)
 
@@ -1981,8 +2009,6 @@ export const tests = {
 	},
 
 	'tween.isPlaying() is false before the tween starts'(test: Test): void {
-		TWEEN.removeAll()
-
 		const t = new TWEEN.Tween({x: 0}).to({x: 1}, 100)
 
 		test.equal(t.isPlaying(), false)
@@ -1991,8 +2017,6 @@ export const tests = {
 	},
 
 	'tween.isPlaying() is true when a tween is started and before it ends'(test: Test): void {
-		TWEEN.removeAll()
-
 		const t = new TWEEN.Tween({x: 0}).to({x: 1}, 100)
 		t.start(0)
 		test.equal(t.isPlaying(), true)
@@ -2003,7 +2027,7 @@ export const tests = {
 	'tween.isPlaying() is false after a tween ends'(test: Test): void {
 		TWEEN.removeAll()
 
-		const t = new TWEEN.Tween({x: 0}).to({x: 1}, 100)
+		const t = new TWEEN.Tween({x: 0}, true).to({x: 1}, 100)
 		t.start(0)
 		TWEEN.update(150)
 		test.equal(t.isPlaying(), false)
@@ -2015,7 +2039,7 @@ export const tests = {
 		TWEEN.removeAll()
 
 		const object = {x: 0}
-		const t = new TWEEN.Tween(object).to({x: 1}, 0)
+		const t = new TWEEN.Tween(object, true).to({x: 1}, 0)
 		t.start(0)
 		TWEEN.update(0)
 
@@ -2039,7 +2063,7 @@ export const tests = {
 		const numGlobalTweensBefore = TWEEN.getAll().length
 		const numGroupTweensBefore = group.getAll().length
 
-		const globalTween = new TWEEN.Tween({})
+		const globalTween = new TWEEN.Tween({}, true)
 		const groupTweenA = new TWEEN.Tween({}, group)
 		const groupTweenB = new TWEEN.Tween({}, group)
 
@@ -2061,7 +2085,7 @@ export const tests = {
 		test.equal(TWEEN.getAll().length, 0, 'No global tweens left')
 		test.equal(group.getAll().length, 0, 'No group tweens left')
 
-		const globalTween = new TWEEN.Tween({})
+		const globalTween = new TWEEN.Tween({}, true)
 		const groupTweenA = new TWEEN.Tween({}, group)
 		const groupTweenB = new TWEEN.Tween({}, group)
 
@@ -2093,7 +2117,7 @@ export const tests = {
 		test.equal(TWEEN.getAll().length, 0, 'No global tweens left')
 		test.equal(group.getAll().length, 0, 'No group tweens left')
 
-		const globalTween = new TWEEN.Tween({})
+		const globalTween = new TWEEN.Tween({}, true)
 		const groupTweenA = new TWEEN.Tween({}, group)
 		const groupTweenB = new TWEEN.Tween({}, group)
 
@@ -2119,19 +2143,16 @@ export const tests = {
 	"Custom group.add() doesn't conflict with global TWEEN group, or vice versa"(test: Test): void {
 		const group = new TWEEN.Group()
 
-		const globalTween = new TWEEN.Tween({})
+		const globalTween = new TWEEN.Tween({}, true)
 		const groupTweenA = new TWEEN.Tween({}, group)
 		const groupTweenB = new TWEEN.Tween({}, group)
 
-		const numGlobalTweens = TWEEN.getAll().length
-		const numGroupTweens = group.getAll().length
-
 		TWEEN.add(globalTween)
 		group.add(groupTweenA)
 		group.add(groupTweenB)
 
-		test.equal(numGlobalTweens + 1, TWEEN.getAll().length)
-		test.equal(numGroupTweens + 2, group.getAll().length)
+		test.equal(TWEEN.getAll().length, 1)
+		test.equal(group.getAll().length, 2)
 
 		test.done()
 	},
@@ -2144,7 +2165,7 @@ export const tests = {
 		const duration = 1000
 
 		const globalObj = {x: 1}
-		new TWEEN.Tween(globalObj).to(endObj, duration).start(0)
+		new TWEEN.Tween(globalObj, true).to(endObj, duration).start(0)
 
 		const groupObj = {x: 1}
 		new TWEEN.Tween(groupObj, group).to(endObj, duration).start(0)
@@ -2164,7 +2185,7 @@ export const tests = {
 		const duration = 1000
 
 		const globalObj = {x: 1}
-		new TWEEN.Tween(globalObj).to(endObj, duration).start(0)
+		new TWEEN.Tween(globalObj, true).to(endObj, duration).start(0)
 
 		const groupObj = {x: 1}
 		new TWEEN.Tween(groupObj, group).to(endObj, duration).start(0)
@@ -2178,7 +2199,7 @@ export const tests = {
 
 	'Ensure tweens work without any group'(test: Test): void {
 		const obj = {x: 0},
-			t = new TWEEN.Tween(obj, false)
+			t = new TWEEN.Tween(obj)
 
 		t.to({x: 1000}, 1000)
 
@@ -2205,13 +2226,13 @@ export const tests = {
 	'Stopping a tween within an update callback will not cause an error.'(test: Test): void {
 		TWEEN.removeAll()
 
-		const tweenA = new TWEEN.Tween({x: 1, y: 2})
+		const tweenA = new TWEEN.Tween({x: 1, y: 2}, true)
 			.to({x: 3, y: 4}, 1000)
 			.onUpdate(function (): void {
 				tweenB.stop()
 			})
 			.start(0)
-		const tweenB = new TWEEN.Tween({x: 5, y: 6})
+		const tweenB = new TWEEN.Tween({x: 5, y: 6}, true)
 			.to({x: 7, y: 8})
 			.onUpdate(function (): void {
 				tweenA.stop()
@@ -2260,16 +2281,16 @@ export const tests = {
 	},
 
 	'Test TWEEN.Tween.pause() and TWEEN.Tween.resume()'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {x: 0.0},
-			t = new TWEEN.Tween(obj)
+			t = new TWEEN.Tween(obj, true)
 
 		t.to({x: 1.0}, 1000)
 
-		TWEEN.removeAll()
-		test.equal(TWEEN.getAll().length, 0)
+		test.equal(TWEEN.getAll().length, 1)
 
 		t.start(0)
-		test.equal(TWEEN.getAll().length, 1)
 		test.equal(t.isPaused(), false)
 
 		TWEEN.update(400)
@@ -2277,7 +2298,7 @@ export const tests = {
 
 		t.pause(450)
 		test.equal(t.isPaused(), true)
-		test.equal(TWEEN.getAll().length, 0)
+		test.equal(TWEEN.getAll().length, 1)
 		test.equal(obj.x, 0.4)
 
 		TWEEN.update(900)
@@ -2302,7 +2323,7 @@ export const tests = {
 
 	'Test TWEEN.Tween.pause() and TWEEN.Tween.resume(), without groups'(test: Test): void {
 		const obj = {x: 0.0},
-			t = new TWEEN.Tween(obj, false)
+			t = new TWEEN.Tween(obj)
 
 		t.to({x: 1.0}, 1000)
 
@@ -2384,9 +2405,11 @@ export const tests = {
 	},
 
 	'Tween.js animate nested object'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {scale: {x: 0}, alpha: 0}
 
-		const t = new TWEEN.Tween(obj).to({scale: {x: 100}, alpha: 100}, 100)
+		const t = new TWEEN.Tween(obj, true).to({scale: {x: 100}, alpha: 100}, 100)
 		t.start(0)
 
 		test.equal(obj.scale.x, 0)
@@ -2407,9 +2430,11 @@ export const tests = {
 	},
 
 	'Tween.js animate nested object including relative value'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {world: {hero: {scale: {x: 0}, x: 100}}, time: 0}
 
-		const t = new TWEEN.Tween(obj).to({world: {hero: {scale: {x: 100}, x: '+100'}}, time: 100}, 100)
+		const t = new TWEEN.Tween(obj, true).to({world: {hero: {scale: {x: 100}, x: '+100'}}, time: 100}, 100)
 		t.start(0)
 
 		test.equal(obj.world.hero.scale.x, 0)
@@ -2433,14 +2458,14 @@ export const tests = {
 	},
 
 	'Test TWEEN.Tween with nested objects'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {x: 0.0, y: 100, some: {value: 0.0, style: {opacity: 1.0}}},
-			t = new TWEEN.Tween(obj)
+			t = new TWEEN.Tween(obj, true)
 
 		t.to({x: 1.0, y: 200, some: {value: 1.0, style: {opacity: 0.5}}}, 1000)
 
-		TWEEN.removeAll()
-
-		test.equal(TWEEN.getAll().length, 0)
+		test.equal(TWEEN.getAll().length, 1)
 
 		t.start(0)
 
@@ -2472,14 +2497,14 @@ export const tests = {
 	},
 
 	'Test TWEEN.Tween.pause() and .resume() with nested objects'(test: Test): void {
+		TWEEN.removeAll()
+
 		const obj = {x: 0.0, y: 100, some: {value: 0.0}},
-			t = new TWEEN.Tween(obj)
+			t = new TWEEN.Tween(obj, true)
 
 		t.to({x: 1.0, y: 200, some: {value: 1.0}}, 1000)
 
-		TWEEN.removeAll()
-
-		test.equal(TWEEN.getAll().length, 0)
+		test.equal(TWEEN.getAll().length, 1)
 
 		t.start(0)
 
@@ -2495,7 +2520,7 @@ export const tests = {
 		t.pause(450)
 
 		test.equal(t.isPaused(), true)
-		test.equal(TWEEN.getAll().length, 0)
+		test.equal(TWEEN.getAll().length, 1)
 		test.equal(obj.x, 0.4)
 		test.equal(obj.y, 140)
 		test.equal(obj.some.value, 0.4)
@@ -2582,9 +2607,11 @@ export const tests = {
 	},
 
 	"Test TWEEN.to(ends) shouldn't grow endless on ends value"(test: Test): void {
+		TWEEN.removeAll()
+
 		const target = {y: 0}
 		const ends = {y: [100, 200]}
-		const tween = new TWEEN.Tween(target).to(ends, 1000)
+		const tween = new TWEEN.Tween(target, true).to(ends, 1000)
 
 		tween.stop().start(0)
 		tween.stop().start(0)
@@ -2601,10 +2628,10 @@ export const tests = {
 		const dynamicTargetValue = {x: 5}
 		const chasingValue = {x: 0}
 		const duration = 1000 // must be even
-		const t1 = new TWEEN.Tween(dynamicTargetValue).to({x: 10}, duration),
-			t2 = new TWEEN.Tween(chasingValue).to(dynamicTargetValue, duration).dynamic(true)
+		const t1 = new TWEEN.Tween(dynamicTargetValue, true).to({x: 10}, duration),
+			t2 = new TWEEN.Tween(chasingValue, true).to(dynamicTargetValue, duration).dynamic(true)
 
-		test.equal(TWEEN.getAll().length, 0)
+		test.equal(TWEEN.getAll().length, 2)
 
 		t1.start(0)
 		t2.start(0)
@@ -2625,10 +2652,10 @@ export const tests = {
 		const dynamicTargetValue = [5]
 		const chasingValue = [0]
 		const duration = 1000 // must be even
-		const t1 = new TWEEN.Tween(dynamicTargetValue).to([10], duration),
-			t2 = new TWEEN.Tween(chasingValue).to(dynamicTargetValue, duration).dynamic(true)
+		const t1 = new TWEEN.Tween(dynamicTargetValue, true).to([10], duration),
+			t2 = new TWEEN.Tween(chasingValue, true).to(dynamicTargetValue, duration).dynamic(true)
 
-		test.equal(TWEEN.getAll().length, 0)
+		test.equal(TWEEN.getAll().length, 2)
 
 		t1.start(0)
 		t2.start(0)
@@ -2656,7 +2683,7 @@ export const tests = {
 			const initialValue = {x: 0}
 			observedValues.push(initialValue)
 			tweens.push(
-				new TWEEN.Tween(initialValue).to({x: dynamicTargetValues.x[i]}, duration).onUpdate(function (object) {
+				new TWEEN.Tween(initialValue, true).to({x: dynamicTargetValues.x[i]}, duration).onUpdate(function (object) {
 					// TODO the fact that we need `index + 1` instead of just
 					// `index` here is confusing. It is because Tween adds an
 					// axtra start value at the beginning of the array. Update
@@ -2667,9 +2694,9 @@ export const tests = {
 			)
 		}
 
-		const t = new TWEEN.Tween(chasingValue).to(dynamicTargetValues, duration).dynamic(true)
+		const t = new TWEEN.Tween(chasingValue, true).to(dynamicTargetValues, duration).dynamic(true)
 
-		test.equal(TWEEN.getAll().length, 0)
+		test.equal(TWEEN.getAll().length, 5)
 
 		tweens.forEach(tween => tween.start(0))
 		t.start(0)