Introducing Tween Easing function

This provides information on various interpolation equations of tween easing functions.

You can change the equation for interpolating between the starting value and the target value using .easing(). The default value is TWEEN.Easing.Linear.None. Below is an example of usage.

const startPosition = new THREE.Vector3();
const endPosition = new THREE.Vector3(1, 0, 0);
 
const tween = new TWEEN.Tween(startPosition);
tween.to(endPosition);
tween.easing(TWEEN.Easing.Quadratic.In);
tween.start();

Graph of Tween Easing Interpolation Equations

You can explore various types of interpolation equations through the cards provided below, which display their graphs.

Additionally, you can walk through the world below to see what happens when you apply each of the interpolation equations. Click on the graph object to make the sphere move.

TWEEN World