Tween 3d objects


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.

 

easing functions

easingFunctions

 

 

easing_thumnailEach 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.

 

tween 3d

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.

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

 

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.