Installation Guide

tween.js is available as the @tweenjs/tween.js package on npm. You can install it in your project using a package manager like npm or yarn.

npm install @tweenjs/tween.js

Using with a Build Tool

If you are using a build tool like Vite, Webpack, or Rollup, you can import tween.js directly into your JavaScript or TypeScript files.

import { Tween, Easing, Group, update } from '@tweenjs/tween.js';

// Your code here...

The library provides different module formats to support various environments:

  • ES Module (ESM): dist/tween.esm.js (Recommended for modern browsers and build tools)
  • CommonJS (CJS): dist/tween.cjs (For older Node.js environments)
  • UMD: dist/tween.umd.js (For direct use in browsers via a <script> tag, creates a global TWEEN object)

Using in the Browser without a Build Tool

You can use tween.js directly in the browser without any build steps.

1. Import from a CDN

The easiest way is to use a CDN like unpkg or cdnjs. This is great for quick prototypes and online code editors.

<script type="module">
    import { Tween, Easing, update } from 'https://unpkg.com/@tweenjs/tween.js@25.0.0/dist/tween.esm.js';

    // Your animation code here
</script>

2. Using Import Maps

For more organized projects without a build tool, you can use an importmap. First, install the package via npm. Then, in your HTML file, map the package name to its local path in node_modules.

<!-- index.html -->
<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>

3. UMD Global (Legacy)

You can also use the UMD build, which exposes a global TWEEN object. This method is considered legacy but is available for compatibility.

<script src="https://unpkg.com/@tweenjs/tween.js@25.0.0/dist/tween.umd.js"></script>
<script>
    const { Tween, Easing } = TWEEN;

    const tween = new Tween({ x: 0 })
        .to({ x: 100 }, 1000)
        .start();

    function animate(time) {
        TWEEN.update(time);
        requestAnimationFrame(animate);
    }
    requestAnimationFrame(animate);
</script>

Manual Build

If you need a custom build, you can clone the repository and build it yourself. You will need Node.js installed.

# 1. Clone the repository
git clone https://github.com/tweenjs/tween.js.git
cd tween.js

# 2. Install dependencies
npm install

# 3. Build the library
npm run build

The compiled files will be available in the dist/ directory. You can then copy the desired file (tween.esm.js, tween.cjs, etc.) into your project.