DOCSEARCHbyAlgolia
Submit Docs

tween.js

repository·main·Indexed 27 days ago

https://github.com/tweenjs/tween.js

A lightweight JavaScript and TypeScript tweening engine designed to animate object properties using optimized Robert Penner's easing equations. It provides tools for linear and non-linear interpolation, chaining animations, repeat and yoyo behavior, and custom easing functions. The library requires manual updates via a loop (e.g., requestAnimationFrame) using TWEEN.update().

Tokens
6.7K
Snippets
27
Records
50
Agent score
93%

What's inside @tweenjs/tween.js

  1. Manually build tween.js from source

    main

    To build the library manually, clone the repository, install dependencies, and run the build script. This generates files in the dist directory, including the recommended ES6 Module (tween.esm.js) and a deprecated UMD build (tween.umd.js).

    git clone https://github.com/tweenjs/tween.js
cd tween.js
npm install
npm run build

  2. Import tween.js from a CDN

    main

    You can import the ESM build directly from a CDN like unpkg without any local installation or build tools.

    <script type="module">
	import {Tween} from 'https://unpkg.com/browse/@tweenjs/tween.js@23.1.3/dist/tween.esm.js'
</script>

  3. Import tween.js without a build tool using importmaps

    main

    If you serve node_modules as part of your website, you can use an importmap to import the library by its package name without a build step.

    Assuming node_modules is at your website's root:

    <script type="importmap">
{
	"imports": {
		"@tweenjs/tween.js": "/node_modules/@tweenjs/tween.js/dist/tween.esm.js"
	}
}
</script>

    Then, you can import it in any module script:

    import * as TWEEN from '@tweenjs/tween.js'
    <script type="importmap">
{
	"imports": {
		"@tweenjs/tween.js": "/node_modules/@tweenjs/tween.js/dist/tween.esm.js"
	}
}
</script>

<script type="module">
	import * as TWEEN from '@tweenjs/tween.js'
</script>

  4. Optimize CSS animations for performance

    main

    To achieve high performance when animating DOM elements, avoid animating top and left properties. Changing these properties forces the browser to recalculate layout (reflow), which is computationally expensive. Instead, use the transform property (e.g., translate), which avoids layout invalidation and can benefit from hardware acceleration.

    If your animation requirements are simple, consider using native CSS animations or transitions instead of Tween.js to allow the browser to optimize the process.

    // INEFFCIENT: Animating top/left causes layout reflow
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'
})

// EFFICIENT: Animating transform avoids layout reflow
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);'
})

  5. Use tween.js without a build tool using importmaps

    main

    If you are serving node_modules directly in a static HTML site, you can use an importmap to map the package name to the ESM build. This allows you to use standard import syntax in your module scripts without a bundler.

    <script type="importmap">
	{
		"imports": {
			"@tweenjs/tween.js": "/node_modules/@tweenjs/tween.js/dist/tween.esm.js"
		}
	}
</script>

<script type="module">
	import {Tween} from '@tweenjs/tween.js'
</script>

  6. Run lint and code style tests

    main

    The project uses JSCS and JSHint to maintain code style consistency. To automatically format code and report errors for snippets that cannot be automatically formatted, run:

    npm run test-lint

    Configuration for formatting and linting is located in .prettierrc.js (Prettier) and .eslintrc.js (ESLint).

  8. Install tween.js via CDN (Deprecated)

    main

    You can install a global TWEEN variable using a UMD file from a CDN. Note that this method is deprecated and will be removed in a future major version.

    To use via cdnjs:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/23.1.3/tween.umd.js"></script>

    To use via unpkg.com:

    <script src="https://unpkg.com/@tweenjs/tween.js@^23.1.3/dist/tween.umd.js"></script>

    Once loaded, access the library members through the TWEEN global variable:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/23.1.3/tween.umd.js"></script>
<script>
	const {Tween, Easing, Group /*, ...*/} = TWEEN

	const tween = new Tween(someObject)
	// ...
</script>

  9. Install tween.js via CDN

    main

    You can include tween.js in your project directly using a <script> tag from a CDN.

    cdnjs:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/23.1.3/tween.umd.js"></script>

    unpkg.com:

    <script src="https://unpkg.com/@tweenjs/tween.js@^23.1.3/dist/tween.umd.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/23.1.3/tween.umd.js"></script>

  11. Set up the tween.js development environment

    main

    To contribute to tween.js, you must have Node.js and npm installed. Follow these steps to clone the repository and install the necessary development dependencies:

    1. Clone the repository:
      git clone https://github.com/tweenjs/tween.js.git
    2. Navigate to the directory:
      cd tween.js
    3. Install dependencies:
      npm install
    git clone https://github.com/tweenjs/tween.js.git
cd tween.js
npm install

  12. Use tween.js with a build tool (Webpack, Vite, etc.)

    main

    If you are using a bundler like Vite, Webpack, Parcel, or Rollup, install the package via npm and import it directly. The build tool will resolve the dependency from node_modules automatically.

    import * as TWEEN from '@tweenjs/tween.js'