LittleJS 1.28.0

TweenSystem

LittleJS Tween System Plugin

  • Lightweight tweens for numbers, Vector2, Color, or any .lerp-able type
  • Chainable easing, looping, and ping-pong
  • Property-path helper for the common case of animating an object field
  • Auto-updates via engineAddPlugin; pauses with the game by default

Classes

Functions

Constants

Functions

Ease.BACK(x) → numbertweenSystem.js:335

Back ease-in: overshoots backward at the start before snapping forward

x number
Ease.BEZIER(x1, y1, x2, y2) → functiontweenSystem.js:437

Cubic Bezier curve solver in the style of CSS cubic-bezier. Control points (0,0), (x1,y1), (x2,y2), (1,1).

x1 number
y1 number
x2 number
y2 number
Ease.BEZIER(0.25, 0.1, 0.25, 1) // CSS "ease"
Ease.BOUNCE(x) → numbertweenSystem.js:370

Bouncing ease-in: small bounces near the start, then a rise to the end. Symmetric with the other base curves, which are all ease-in. To get the classic "object falls and hits the ground" shape (bounces near x=1), wrap with Ease.OUT: Ease.OUT(Ease.BOUNCE).

x number
Ease.BOUNCE                  // ease-in bounce (bouncy at start)
Ease.OUT(Ease.BOUNCE)        // ease-out bounce (object hits ground)
Ease.IN_OUT(Ease.BOUNCE)     // bounces at both ends
Ease.CIRC(x) → numbertweenSystem.js:323

Circular ease-in curve

x number
Ease.ELASTIC(x) → numbertweenSystem.js:341

Elastic ease-in: oscillations that grow toward the end

x number
Ease.EXPO(x) → numbertweenSystem.js:329

Exponential ease-in curve (2^(10x-10))

x number
Ease.IN(f) → functiontweenSystem.js:393

Ease-in direction modifier: returns the curve unchanged. Symmetric with OUT and IN_OUT. Base curves are already ease-in by convention, so wrapping a curve in IN is a no-op — useful when picking the direction programmatically.

f function

Curve to use as ease-in (returned unchanged)

// Pick direction at runtime
const dir = bouncyMode ? Ease.OUT : Ease.IN;
new Tween(cb, 0, 10, 1).setEase(dir(Ease.BACK));
Ease.IN_OUT(f) → functiontweenSystem.js:408

Combine the first half of f with Ease.OUT(f) for a symmetric curve

f function
Ease.LINEAR(x) → numbertweenSystem.js:304

Linear (identity) curve

x number
Ease.OUT(f) → functiontweenSystem.js:402

Reverse a curve so it eases out instead of in: x => 1 - f(1 - x).

f function
Ease.OUT(Ease.POWER(2)) // ease-out quadratic
Ease.PIECEWISE(…fns) → functiontweenSystem.js:416

Split [0,1] into N equal sections and run a different curve in each. Each curve is mapped to its section: section i runs over [i/n, (i+1)/n] and its output is mapped to [i/n, (i+1)/n] of the overall range.

…fns function
Ease.POWER(n) → functiontweenSystem.js:311

Power curve factory: Ease.POWER(n) returns x => x**n. Use n=2 for quadratic, n=3 for cubic, etc.

n number
Ease.SINE(x) → numbertweenSystem.js:317

Sine ease-in curve: starts slow, ends fast

x number
Ease.SPRING(x) → numbertweenSystem.js:351

Spring ease-in: wobbles around the start before springing to the end; Ease.OUT(Ease.SPRING) overshoots and settles on the target.

x number
tweenProperty(target, propertyPath, start, end, duration, options) → Tween<T>tweenSystem.js:497

Tween a property on an object by dot-path. Returns the underlying Tween so all chaining methods (setEase, then, loop, pingPong, etc.) remain available.

start and end may be numbers, Vector2, Vector3 or Color instances, or any object with a lerp(other, percent) => sameType method.

It stops on its own once the target is destroyed, so a looping tween on an object ends with it; a tween on a value inside the object, like tweenProperty(obj.pos, 'x'), or a new Tween with its own callback, has to be stopped by the game.

target Object

The object whose property is being animated

propertyPath string

Dot-separated path, e.g. 'pos.x' or 'color'

start T

Starting value

end T

Ending value

duration number optional, default 1

Duration in seconds

options Object optional

Same options as the Tween constructor

ease function optional

Easing function (defaults to LINEAR)

useRealTime boolean optional, default false

Advance even when the game is paused

paused boolean optional, default false

Start in paused state

// Numeric: slide an object's x with an ease-out sine curve
tweenProperty(player, 'pos.x', 0, 10, 2).setEase(Ease.OUT(Ease.SINE));
// Vector2: animate a position diagonally
tweenProperty(player, 'pos', vec2(-5, 0), vec2(5, 3), 2);
// Color: pulse between two colors
tweenProperty(sprite, 'color', RED, BLUE, 1).pingPong();
tweenStopAll()tweenSystem.js:675

Stop every active tween, ending loops too, without calling their then-callbacks. Useful for resets on level transitions or when changing scenes.

tweenUpdate(gameDelta, realDelta)tweenSystem.js:591

Engine plugin hook: advance every active tween by the appropriate delta. The engine calls it with no arguments on every fixed update, so it can run more than once in a rendered frame, and on paused updates too, where only real time tweens move. May also be called with (gameDelta, realDelta) to drive tweens without the engine loop, for headless tests or an engine in manual step that is not stepped; in a running game such a call adds to the engine's own update, and a delta of 0 or less does nothing.

gameDelta number optional

Game-time delta in seconds; default: game time since the tween's last engine update

realDelta number optional

Real-time delta in seconds; default: real time since the tween's last engine update

Constants

EasetweenSystem.js:298

Library of named easing curves and direction modifiers. All curves accept x in [0,1] and return [0,1] (with possible overshoot for ELASTIC/BACK/SPRING/BOUNCE). Curves are values you pass to setEase or compose via the IN/OUT/IN_OUT/PIECEWISE/BEZIER modifiers.

// Use a basic curve
new Tween(callback, 0, 10, 1).setEase(Ease.SINE);
// Use a modifier on a curve
new Tween(callback, 0, 10, 1).setEase(Ease.OUT(Ease.BACK));