Advanced Topics

This section covers more advanced features of tween.js, including easing, interpolation, managing groups of tweens, and performance considerations.

Easing Functions

Easing functions control the rate of change of a parameter over time, making animations appear more natural. You can apply an easing function with the .easing() method.

import { Easing } from '@tweenjs/tween.js';

tween.easing(Easing.Quadratic.InOut);

tween.js provides a comprehensive set of built-in easing functions grouped by equation type (Quadratic, Cubic, Exponential, Elastic, etc.) and phase (In, Out, InOut).

Available Easing Functions

  • Easing.Linear.None
  • Easing.Quadratic (In, Out, InOut)
  • Easing.Cubic (In, Out, InOut)
  • Easing.Quartic (In, Out, InOut)
  • Easing.Quintic (In, Out, InOut)
  • Easing.Sinusoidal (In, Out, InOut)
  • Easing.Exponential (In, Out, InOut)
  • Easing.Circular (In, Out, InOut)
  • Easing.Elastic (In, Out, InOut)
  • Easing.Back (In, Out, InOut)
  • Easing.Bounce (In, Out, InOut)

Custom Easing Functions

You can also provide your own custom easing function. It must be a function that accepts a single argument k (progress, a value from 0 to 1) and returns a new progress value.

function customEasing(k) {
    return k * k * k; // Equivalent to Cubic.In
}

tween.easing(customEasing);

Array Interpolation

Instead of tweening to a single end value, you can provide an array of values. The tween will interpolate through these values over its duration.

const tween = new Tween({ x: 0 })
    .to({ x: [100, 50, 200] }, 2000);

This will cause x to move from its starting value to 100, then to 50, and finally to 200.

You can control the interpolation algorithm with the .interpolation() method.

import { Interpolation } from '@tweenjs/tween.js';

tween.interpolation(Interpolation.Bezier);

Available interpolation functions: * Interpolation.Linear (default) * Interpolation.Bezier * Interpolation.CatmullRom

Managing Tween Groups

By default, all tweens are added to a main, global group. In complex applications, it's better to create your own Group instances to manage different sets of tweens independently.

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

// Create a custom group
const myGroup = new Group();

// Create a tween and add it to the group
const tween = new Tween({ x: 0 }, myGroup)
    .to({ x: 100 }, 1000)
    .start();

// Update only the tweens in your custom group
function animate(time) {
    myGroup.update(time);
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

This prevents conflicts where updating or removing tweens in one part of your application might accidentally affect tweens in another.

Relative Values

You can specify relative values in the .to() method by providing them as strings with a '+' or '-' prefix. The tween will calculate the final value based on the property's value at the moment the tween starts.

const position = { x: 50 };

const tween = new Tween(position)
    .to({ x: '+100' }, 1000) // Will animate to 150
    .start();

Performance Tips

To ensure smooth animations, avoid costly operations inside your onUpdate callback, as it runs on every frame.

When animating DOM elements, prefer using the CSS transform property (translate, scale, rotate) over properties like top, left, width, and height. transform changes are handled by the browser's compositor, which is much more performant and often hardware-accelerated, preventing costly layout recalculations.

Less Performant:

tween.onUpdate(obj => {
    element.style.left = obj.x + 'px';
    element.style.top = obj.y + 'px';
});

More Performant:

tween.onUpdate(obj => {
    element.style.transform = `translate(${obj.x}px, ${obj.y}px)`;
});