ttween

ttween (short for TinyTween) is a super tiny (140 formatted lines), single file, hopefully fast (never tested it) tweening library for animating objects in JavaScript.

🚀

You should probably use gsap.

Getting Started

Copy it?

It's a single js file, no dependencies, so you might want to just copy the index file in your project and import it from there.

Install it

First, install.

npm i ttween

pnpm i ttween

Import it

Import it in your file.

import { Tween } from "ttween";

Then, create a new Tween instance by passing the target object, the properties to animate, and an optional configuration object:

const target = { x: 0, y: 0 };
const properties = { x: 100, y: 200 };
const config = {
  duration: 1000,
  easing: easeInOutCubic,
  delay: 500,
  onUpdate: () => console.log("Updating"),
  onComplete: () => console.log("Completed"),
};

const tween = new Tween(target, properties, config);

Finally, start the tween:

tween.start();

Configuration Parameters

prop	default	value	desc
duration	1000	ms	Tween duration in milliseconds.
easing	easeLinear()	func	Easing Function.
delay	0	ms	Tween Delay.
onUpdate	--	callback	A callback function called on every update tick.
onComplete	--	callback	A callback function called when the tween completes.

Easing Functions

ttween includes several easing functions: easeLinear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeOutExpo.

import { easeInOutCubic } from "ttween";

You can use these easing functions by importing them. You can also use any easing function you want by passing is as a variable. Use the following format.

export function easeLinear(t, b, c, d) {
  return (c * t) / d + b;
}

Object Pooling

ttween uses an object pooling system to optimize memory usage and performance. To create a new Tween instance using the object pool, use the Tween.create method:

const tween = Tween.create(target, properties, config);

When a tween completes or is killed, it is returned to the object pool for future reuse.

Kill a Tween

To instantly stop a tween and remove it from the active tweens list, call the kill method on the tween instance:

tween.kill();

Examples

Basic Tween

import { Tween, easeInOutCubic } from "ttween";

const target = { x: 0, y: 0 };

const tween = new Tween(
  target,
  { x: 100 },
  {
    duration: 1000,
    easing: easeInOutCubic,
    onUpdate: () => console.log("Updating"),
    onComplete: () => console.log("Completed"),
  }
);

tween.start();

Multi Tween

import { Tween, easeInOutCubic } from "ttween";

const target = { x: 0, y: 0 };

const tween = new Tween(
  target,
  { x: 100, y: 200 },
  {
    duration: 1000,
    easing: easeInOutCubic,
    onUpdate: () => console.log("Updating"),
    onComplete: () => console.log("Completed"),
  }
);

tween.start();

Tween with Delay

import { Tween } from "ttween";

const target = { x: 0 };
const properties = { x: 100 };

const tween = new Tween(target, properties, {
  delay: 500,
  onComplete: () => console.log("Completed"),
});

tween.start();