Article Categories

Selected Reading

Tweening and animating HTML5 and JavaScript properties with Tween.js

Javascript Web Development Front End Technology

Tween.js is a JavaScript library that is mainly used when we want to tween or animate an HTML5 or JavaScript property. It can work standalone as well as when integrated with Easel.js. In this tutorial, we will learn how we can make use of Tween.js with the help of a few examples.

Before we go on to the main example, let's first discuss a few simple tweens so that when we use them in the main example, you don't get overwhelmed.

Simple Tween

In this tween, we will tween the alpha property of the target from 0 to 1 for 500 ms and then we will call the handleComplete function, which we have chained via the call method.

target.alpha = 0;
createjs.Tween.get(target).to({alpha:1}, 500).call(handleComplete);
function handleComplete() {
    // Tween done
}

Chainable Tween

In this tween, we will see how we can chain tweens. This particular tween will wait for 0.5s, then we will tween the target's alpha property to 0 over 500 ms, and then set its "visible" to false. Finally, we will call the handleComplete function.

target.alpha = 1;
createjs.Tween.get(target).wait(500).to({alpha:0, visible:false}, 500).call(handleComplete);
function handleComplete() {
    // Tween done
}

Interactive Animation Example

Now let's move our focus to the main example. In this program, we will create animated circles that respond to mouse movements. When you click anywhere on the canvas, all circles will smoothly animate to that position using different easing effects.

<!DOCTYPE html>
<html>
<head>
    <title>TweenJS Example: Interactive Circles</title>
    <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    <script>
        let canvas;
        let stage;
        let tweens;
        let activeCount;
        let circleCount = 25;
        let text;

        function init() {
            canvas = document.getElementById("simpleCanvas");
            stage = new createjs.Stage(canvas);
            stage.enableDOMEvents(true);
            tweens = [];
            stage.enableMouseOver(10);
            createjs.Touch.enable(stage);

            // Create circles with different sizes and positions
            for (let i = 0; i < circleCount; i++) {
                let circle = new createjs.Shape();
                circle.graphics.setStrokeStyle(15);
                circle.graphics.beginStroke("#113355");
                circle.graphics.drawCircle(0, 0, (i + 1) * 4);
                circle.alpha = 1 - i * 0.02;
                circle.x = Math.random() * 550;
                circle.y = Math.random() * 400;
                circle.compositeOperation = "lighter";

                // Initial tween to center position
                let tween = createjs.Tween.get(circle).to({
                    x: 275,
                    y: 150
                }, (0.5 + i * 0.04) * 1500, createjs.Ease.bounceOut).call(tweenComplete);

                tweens.push({
                    tween: tween,
                    ref: circle
                });
                stage.addChild(circle);
            }

            activeCount = circleCount;
            stage.addEventListener("stagemouseup", handleMouseUp);

            // Add instruction text
            text = new createjs.Text("Click to Tween", "24px Arial", "#777");
            text.x = 350;
            text.y = 200;
            stage.addChild(text);

            createjs.Ticker.addEventListener("tick", tick);
        }

        function handleMouseUp(event) {
            // Remove instruction text after first click
            if (text) {
                stage.removeChild(text);
                text = null;
            }

            // Animate all circles to mouse position
            for (let i = 0; i < circleCount; i++) {
                let ref = tweens[i].ref;
                createjs.Tween.get(ref, {
                    override: true
                }).to({
                    x: stage.mouseX,
                    y: stage.mouseY
                }, (0.5 + i * 0.04) * 1500, createjs.Ease.bounceOut).call(tweenComplete);
            }
            activeCount = circleCount;
        }

        function tweenComplete() {
            activeCount--;
        }

        function tick(event) {
            if (activeCount) {
                stage.update(event);
            }
        }
    </script>
</head>
<body onload="init();">
    <header>
        <h3>TweenJS Interactive Animation</h3>
    </header>
    <canvas id="simpleCanvas" width="580" height="350" style="background:#000;"></canvas>
</body>
</html>

How It Works

The animation works through several key steps:

Canvas Setup: We create a Stage using CreateJS and enable DOM events and touch support for interactive functionality.
Circle Creation: 25 circles are generated with different sizes, alpha values, and random starting positions.
Initial Animation: All circles animate from their random positions to the center using bounce easing.
Mouse Interaction: When clicked, circles animate to the mouse position with staggered timing for a wave effect.
Performance: The tick function only updates the stage when animations are active.

Key Tween.js Methods

Method	Purpose	Example
`Tween.get()`	Creates a new tween for an object	`Tween.get(circle)`
`.to()`	Animates to target properties	`.to({x: 100}, 1000)`
`.call()`	Executes function when tween completes	`.call(handleComplete)`
`.wait()`	Pauses animation for specified time	`.wait(500)`

Conclusion

Tween.js provides powerful animation capabilities for HTML5 canvas applications. The library excels at creating smooth property transitions with various easing effects, making it perfect for interactive animations and user interface enhancements.

Mukul Latiyan

Updated on: 2026-03-15T23:19:00+05:30

779 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next