Benchmark

Tween counter: ~0k

What is happening here:

Bellow, 5 scenario are tested over different configuration / libraries:

1. Normal usage : 200 tween over 100 frames x 50 times
2. Long duration usage : 1000 tween over 500 frames x 100 times (to test long term usage and GC)
3. Medium usage : 2k tween over 200 frames x 5 times
4. Heavy usage : 5k tween over 200 frames x 5 times
5. Unrealistic : 10k tween over 500 frames x 5 times (to test many concurrent tween)

Summarize:

Scenario 1 & 2: simulate normal game usage
Scenario 3 & 4 & 5: are stress test which should almost never happen in real life

Those 3 libraries (Fatina, Tina.js and Tween.js) all perform well under normal usage. This page is creating millions of tweens, this is definitely not a normal usage ...
results are just here to get an estimation.

Results:

Normal tweens

#	Fatina	TINA.js	Tween.js
Scenario 1
Scenario 2
Scenario 3
Scenario 4
Scenario 5

* smaller is better

See Code

// Create a really simple tween on one property

// Fatina
Fatina.tween({x:0}).to({x:100}, 10).start();

// Tina
new TINA.Tween({x:0}, ['x']).to({x:100}, 10).start();

// Tween.js
new TWEEN.Tween({x:0}, ['x']).to({x:100}, 10).start();

Complicated tweens (callback, loop, easing)

#	Fatina	TINA.js	Tween.js
Scenario 1
Scenario 2
Scenario 3
Scenario 4
Scenario 5

* smaller is better

See Code

// Create a tween over 4 properties, with easing, looping & callbacks

// Fatina
Fatina.tween({x:0, y:0, z:0, a:0})
    .to({x:100, y:2, z:69, a:-71602}, Math.random() * 5 + 10)
    .setLoop(2)
    .setEasing('inOutQuad')
    .onStart(() => {})
    .onComplete(() => {})
    .start();

// Tina
new TINA.Tween({x:0, y:0, z:0, a:0}, ['x', 'y', 'z', 'a'])
    .to({x:100, y:2, z:69, a:-71602}, Math.random() * 5 + 10, TINA.easing.quadInOut)
    .iterations(2)
    .onStart(() => {})
    .onComplete(() => {})
    .start();

// Tween.js
new new TWEEN.Tween({x:0, y:0, z:0, a:0}, ['x', 'y', 'z', 'a'])
    .to({x:100, y:2, z:69, a:-71602}, Math.random() * 5 + 10)
    .easing(TWEEN.Easing.Quadratic.InOut)
    .repeat(2)
    .onStart(() => {})
    .onComplete(() => {})
    .start();

Sequence / Chains

#	Fatina	TINA.js	Tween.js **
Scenario 1
Scenario 2
Scenario 3
Scenario 4
Scenario 5

* smaller is better
** TweenJS doesn't support sequence or timeline, so using .chain() for this test. Which is lighter but dont provides most of the sequence features

See Code

// Create a sequence of 2 simple tween with a interval in between

// Fatina
Fatina.sequence([
    Fatina.tween({x:0}).to({x: 2}, 2),
    Fatina.delay(1),
    Fatina.tween({x:0}).to({x: 5}, 3),
    Fatina.tween({x:0}).to({x: -5}, 1),
    Fatina.tween({x:0}).to({x: 0}, 2)
]).start();

// Tina
new TINA.Sequence()
    .add(TINA.Tween({x:0}, ['x']).to({x:2}, 2))
    .addDelay(1)
    .add(TINA.Tween({x:0}, ['x']).to({x:5}, 3))
    .add(TINA.Tween({x:0}, ['x']).to({x:-5}, 1))
    .add(TINA.Tween({x:0}, ['x']).to({x:0}, 2))
    .start();

// Tween.js (doesnt really support sequence or timeline, only chain)
let tweenA = new TWEEN.Tween({x:0}, ['x']).to({x:2}, 2);
let tweenB = new TWEEN.Tween({x:0}, ['x']).to({x:5}, 3).delay(1);
let tweenC = new TWEEN.Tween({x:0}, ['x']).to({x:-5}, 1);
let tweenD = new TWEEN.Tween({x:0}, ['x']).to({x:0}, 2);
tweenC.chain(tweenD);
tweenB.chain(tweenC);
tweenA.chain(tweenB);
tweenA.start();

Benchmark

Results:

Normal tweens

Complicated tweens (callback, loop, easing)

Sequence / Chains

Fatina

Normal Tween

Complicated Tween

Sequence

TINA

Normal Tween

Complicated Tween

Sequence

Tween.js

Normal Tween

Complicated Tween

Sequence