@web-engine-dev/tween

Advanced interpolation with method chaining for web-engine.

Features

• Method Chaining: Fluent tween API
• Easing Functions: 30+ easing curves
• Property Tweening: Any numeric property
• Sequences: Chain multiple tweens
• Parallel: Run tweens simultaneously

Installation

npm install @web-engine-dev/tween
# or
pnpm add @web-engine-dev/tween

Quick Start

import { Tween, TweenManager } from '@web-engine-dev/tween';

const tweens = new TweenManager();

// Simple tween
tweens
  .to(sprite.position, { x: 100, y: 200 }, 1.0)
  .ease('easeOutQuad')
  .onComplete(() => console.log('Done!'));

// Method chaining
tweens.to(sprite, { alpha: 0 }, 0.5).delay(1.0).ease('easeInOut').yoyo().repeat(3);

// Update each frame
tweens.update(deltaTime);

API Overview

Basic Tweens

// To target values
tweens.to(object, { x: 100 }, duration);

// From values
tweens.from(object, { x: 0 }, duration);

// From-to
tweens.fromTo(object, { x: 0 }, { x: 100 }, duration);

Tween Options

tweens
  .to(obj, { x: 100 }, 1.0)
  .delay(0.5) // Wait before starting
  .ease('easeOutBounce') // Easing function
  .repeat(3) // Repeat count
  .repeatDelay(0.2) // Delay between repeats
  .yoyo() // Reverse on repeat
  .onStart(() => {})
  .onUpdate((t) => {})
  .onComplete(() => {})
  .onRepeat(() => {});

Easing Functions

Category	Functions
Linear	linear
Quad	easeInQuad, easeOutQuad, easeInOutQuad
Cubic	easeInCubic, easeOutCubic, easeInOutCubic
Elastic	easeInElastic, easeOutElastic
Bounce	easeInBounce, easeOutBounce
Back	easeInBack, easeOutBack

Sequences

const seq = tweens
  .sequence()
  .append(tweens.to(a, { x: 100 }, 1))
  .append(tweens.to(b, { y: 200 }, 0.5))
  .join(tweens.to(c, { alpha: 0 }, 0.5)) // Parallel
  .appendDelay(0.5)
  .appendCallback(() => console.log('Done'));

seq.play();

Control

const tween = tweens.to(obj, { x: 100 }, 2);

tween.pause();
tween.resume();
tween.kill();
tween.restart();
tween.seek(0.5); // Seek to 50%