Tweens or transitions are an essential part of animation coding. In layman’s terms, Tweens helps you move things around on the screen using only code, instead of the timeline. Which actually means, computing the in-between values of a start and end value. Finally apply these in-between values to an actual object, which creates a fluid motion. Most of the time the tween equation is driven by an additional easing function. Tweens are fairly common theme, for further details about tweens look up for the most used tweening libraries like, GSAP and creates.js. We are using the tween.js library for the following examples, check their github page for the documentation.

tween.js

easing functions

Each of this easing function are based of simple math equation, below a sample for the most basic one “linear interpolation”. This makes it possible to animate any value represented in numbers, the object itself doesn’t matter.

Add a tween to any object on your screen. In this case a simple box made with three.js. You can find a simple scene setup tutorial on the Github project page of three.js. Below is the code to add a tween to a certain object, or it’s position values. Make sure you check the official documentation of the tween.js library, there are plenty of options to check out.

        // add a box	
        var geometry	= new THREE.BoxGeometry(0.5,0.5,0.5);
        var material	= new THREE.MeshNormalMaterial(); 
        var mesh	= new THREE.Mesh( geometry, material );
        scene.add( mesh );

        // add Tween
        var tween = new TWEEN.Tween(mesh.position).to({ x: 1, y: 0, z: 0 }, 1000).start();
            tween.easing(TWEEN.Easing.Elastic.InOut);
            tween.repeat(Infinity); 
            tween.yoyo(true);

        //ADD EVENTS TO TWEEN
            tween.onStart(function() { console.log("start") });
            tween.onComplete(function() { console.log("complete") });

This line of code updates all Tweens and has to be called inside the render tick.

//UPDATE TWEEN
TWEEN.update();

Conclusion

Tweens are essential, once you feel comfortable with it you will use them all the time. Either in game dev, for GUI animations or any kind of animation. Tweens perform naturally really fast, and are easy to implement.
There is definitely no easier way to move things on the screen than a tween.