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
- Source
Classes
Members
(static, constant) Ease
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.
- Source
// 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));(static, constant) Ease
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.
- Source
// 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));Methods
(static) BACK(x) → {number}
Back ease-in: overshoots backward at the start before snapping forward.
| Name | Type | Description |
|---|---|---|
x | number |
- Source
- Type:
- number
(static) BACK(x) → {number}
Back ease-in: overshoots backward at the start before snapping forward.
| Name | Type | Description |
|---|---|---|
x | number |
- Source
- Type:
- number
(static) BEZIER(x1, y1, x2, y2) → {function}
Cubic Bezier curve solver in the style of CSS cubic-bezier. Control points (0,0), (x1,y1), (x2,y2), (1,1).
| Name | Type | Description |
|---|---|---|
x1 | number | |
y1 | number | |
x2 | number | |
y2 | number |
- Source
- Type:
- function
Ease.BEZIER(0.25, 0.1, 0.25, 1) // CSS "ease"(static) BEZIER(x1, y1, x2, y2) → {function}
Cubic Bezier curve solver in the style of CSS cubic-bezier. Control points (0,0), (x1,y1), (x2,y2), (1,1).
| Name | Type | Description |
|---|---|---|
x1 | number | |
y1 | number | |
x2 | number | |
y2 | number |
- Source
- Type:
- function
Ease.BEZIER(0.25, 0.1, 0.25, 1) // CSS "ease"(static) BOUNCE(x) → {number}
Bouncing ease-in: slow ramp with bouncing impacts near 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).
| Name | Type | Description |
|---|---|---|
x | number |
- Source
- Type:
- number
Ease.BOUNCE // ease-in bounce (slow, then bouncy at end)
Ease.OUT(Ease.BOUNCE) // ease-out bounce (object hits ground)
Ease.IN_OUT(Ease.BOUNCE) // bounces at both ends(static) BOUNCE(x) → {number}
Bouncing ease-in: slow ramp with bouncing impacts near 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).
| Name | Type | Description |
|---|---|---|
x | number |
- Source
- Type:
- number
Ease.BOUNCE // ease-in bounce (slow, then bouncy at end)
Ease.OUT(Ease.BOUNCE) // ease-out bounce (object hits ground)
Ease.IN_OUT(Ease.BOUNCE) // bounces at both ends(static) CIRC(x) → {number}
Circular ease-in curve.
| Name | Type | Description |
|---|---|---|
x | number |
- Source
- Type:
- number
(static) CIRC(x) → {number}
Circular ease-in curve.
| Name | Type | Description |
|---|---|---|
x | number |
- Source
- Type:
- number
(static) ELASTIC(x) → {number}
Elastic ease-in: oscillates with decreasing amplitude.
| Name | Type | Description |
|---|---|---|
x | number |
- Source
- Type:
- number
(static) ELASTIC(x) → {number}
Elastic ease-in: oscillates with decreasing amplitude.
| Name | Type | Description |
|---|---|---|
x | number |
- Source
- Type:
- number
(static) EXPO(x) → {number}
Exponential ease-in curve (2^(10x-10)).
| Name | Type | Description |
|---|---|---|
x | number |
- Source
- Type:
- number
(static) EXPO(x) → {number}
Exponential ease-in curve (2^(10x-10)).
| Name | Type | Description |
|---|---|---|
x | number |
- Source
- Type:
- number
(static) IN(f) → {function}
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.
| Name | Type | Description |
|---|---|---|
f | function | Curve to use as ease-in (returned unchanged) |
- Source
- Type:
- function
// Pick direction at runtime
const dir = bouncyMode ? Ease.OUT : Ease.IN;
new Tween(cb, 0, 10, 1).setEase(dir(Ease.BACK));(static) IN(f) → {function}
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.
| Name | Type | Description |
|---|---|---|
f | function | Curve to use as ease-in (returned unchanged) |
- Source
- Type:
- function
// Pick direction at runtime
const dir = bouncyMode ? Ease.OUT : Ease.IN;
new Tween(cb, 0, 10, 1).setEase(dir(Ease.BACK));(static) IN_OUT(f) → {function}
Combine the first half of f with Ease.OUT(f) for a symmetric curve. Bug-fix vs the original library: the original referenced an undefined global Piecewise; this implementation routes through Ease.PIECEWISE.
| Name | Type | Description |
|---|---|---|
f | function |
- Source
- Type:
- function
(static) IN_OUT(f) → {function}
Combine the first half of f with Ease.OUT(f) for a symmetric curve. Bug-fix vs the original library: the original referenced an undefined global Piecewise; this implementation routes through Ease.PIECEWISE.
| Name | Type | Description |
|---|---|---|
f | function |
- Source
- Type:
- function
(static) LINEAR(x) → {number}
Linear (identity) curve.
| Name | Type | Description |
|---|---|---|
x | number |
- Source
- Type:
- number
(static) LINEAR(x) → {number}
Linear (identity) curve.
| Name | Type | Description |
|---|---|---|
x | number |
- Source
- Type:
- number
(static) OUT(f) → {function}
Reverse a curve so it eases out instead of in: x => 1 - f(1 - x).
| Name | Type | Description |
|---|---|---|
f | function |
- Source
- Type:
- function
Ease.OUT(Ease.POWER(2)) // ease-out quadratic(static) OUT(f) → {function}
Reverse a curve so it eases out instead of in: x => 1 - f(1 - x).
| Name | Type | Description |
|---|---|---|
f | function |
- Source
- Type:
- function
Ease.OUT(Ease.POWER(2)) // ease-out quadratic(static) PIECEWISE(…fns) → {function}
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.
| Name | Type | Attributes | Description |
|---|---|---|---|
fns | function | <repeatable> |
- Source
- Type:
- function
(static) PIECEWISE(…fns) → {function}
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.
| Name | Type | Attributes | Description |
|---|---|---|---|
fns | function | <repeatable> |
- Source
- Type:
- function
(static) POWER(n) → {function}
Power curve factory: Ease.POWER(n) returns x => x**n. Use n=2 for quadratic, n=3 for cubic, etc.
| Name | Type | Description |
|---|---|---|
n | number |
- Source
- Type:
- function
(static) POWER(n) → {function}
Power curve factory: Ease.POWER(n) returns x => x**n. Use n=2 for quadratic, n=3 for cubic, etc.
| Name | Type | Description |
|---|---|---|
n | number |
- Source
- Type:
- function
(static) SINE(x) → {number}
Sine ease-in curve: starts slow, ends fast.
| Name | Type | Description |
|---|---|---|
x | number |
- Source
- Type:
- number
(static) SINE(x) → {number}
Sine ease-in curve: starts slow, ends fast.
| Name | Type | Description |
|---|---|---|
x | number |
- Source
- Type:
- number
(static) SPRING(x) → {number}
Spring-like ease-out: oscillates outward after passing the target.
| Name | Type | Description |
|---|---|---|
x | number |
- Source
- Type:
- number
(static) SPRING(x) → {number}
Spring-like ease-out: oscillates outward after passing the target.
| Name | Type | Description |
|---|---|---|
x | number |
- Source
- Type:
- number
(static) Tween#getPercent() → {number}
Get how far this tween has progressed, from 0 (just started) to 1 (completed). Clamped — overshoot past completion still reads 1.
- Source
- Type:
- number
(static) Tween#getPercent() → {number}
Get how far this tween has progressed, from 0 (just started) to 1 (completed). Clamped — overshoot past completion still reads 1.
- Source
- Type:
- number
(static) Tween#getValue() → {number|Vector2|Color}
Get the current interpolated value (the value most recently passed to the callback). Returns a number, Vector2, or Color depending on the tween's start/end types.
- Source
- Type:
- number |
Vector2 | Color
(static) Tween#getValue() → {number|Vector2|Color}
Get the current interpolated value (the value most recently passed to the callback). Returns a number, Vector2, or Color depending on the tween's start/end types.
- Source
- Type:
- number |
Vector2 | Color
(static) Tween#interp(life) → {number}
Compute the interpolated value at the given remaining life. At life === duration the result is start; at life === 0 it is end.
| Name | Type | Description |
|---|---|---|
life | number |
- Source
- Type:
- number
(static) Tween#interp(life) → {number}
Compute the interpolated value at the given remaining life. At life === duration the result is start; at life === 0 it is end.
| Name | Type | Description |
|---|---|---|
life | number |
- Source
- Type:
- number
(static) Tween#isActive() → {boolean}
True if this tween is in the active list and not paused.
- Source
- Type:
- boolean
(static) Tween#isActive() → {boolean}
True if this tween is in the active list and not paused.
- Source
- Type:
- boolean
(static) Tween#loop(countopt) → {Tween}
Repeat this tween n total times. After each iteration finishes, a fresh tween with the same parameters takes over via the then slot. loop() with no argument loops forever.
Mutually exclusive with pingPong; calling either replaces the other, and calling then after either clears the loop (last call wins).
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
count | number | <optional> | Infinity |
- Source
- Type:
- Tween
(static) Tween#loop(countopt) → {Tween}
Repeat this tween n total times. After each iteration finishes, a fresh tween with the same parameters takes over via the then slot. loop() with no argument loops forever.
Mutually exclusive with pingPong; calling either replaces the other, and calling then after either clears the loop (last call wins).
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
count | number | <optional> | Infinity |
- Source
- Type:
- Tween
(static) Tween#pause()
Pause this tween. While paused, tweenUpdate skips it.
- Source
(static) Tween#pause()
Pause this tween. While paused, tweenUpdate skips it.
- Source
(static) Tween#pingPong(countopt) → {Tween}
Like loop, but swap start and end between iterations so the value bounces back and forth. pingPong() with no argument bounces forever.
Mutually exclusive with loop; calling either replaces the other, and calling then after either clears the loop (last call wins).
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
count | number | <optional> | Infinity |
- Source
- Type:
- Tween
(static) Tween#pingPong(countopt) → {Tween}
Like loop, but swap start and end between iterations so the value bounces back and forth. pingPong() with no argument bounces forever.
Mutually exclusive with loop; calling either replaces the other, and calling then after either clears the loop (last call wins).
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
count | number | <optional> | Infinity |
- Source
- Type:
- Tween
(static) Tween#restart()
Reset this tween to the start: life back to duration, pause cleared, re-added to the active list if previously stopped, and the callback re-fired with the start value.
- Source
(static) Tween#restart()
Reset this tween to the start: life back to duration, pause cleared, re-added to the active list if previously stopped, and the callback re-fired with the start value.
- Source
(static) Tween#resume()
Resume a paused tween.
- Source
(static) Tween#resume()
Resume a paused tween.
- Source
(static) Tween#setEase(easeFn) → {Tween}
Set the easing curve and return this for chaining.
| Name | Type | Description |
|---|---|---|
easeFn | function |
- Source
- Type:
- Tween
(static) Tween#setEase(easeFn) → {Tween}
Set the easing curve and return this for chaining.
| Name | Type | Description |
|---|---|---|
easeFn | function |
- Source
- Type:
- Tween
(static) Tween#stop()
Remove this tween from the active list and prevent any pending then-callback.
- Source
(static) Tween#stop()
Remove this tween from the active list and prevent any pending then-callback.
- Source
(static) Tween#then(callback) → {Tween}
Set a single completion callback. Calling then again replaces the previous callback. Returns this for chaining.
Calling then after loop or pingPong overrides the loop chain (last call wins).
| Name | Type | Description |
|---|---|---|
callback | function |
- Source
- Type:
- Tween
(static) Tween#then(callback) → {Tween}
Set a single completion callback. Calling then again replaces the previous callback. Returns this for chaining.
Calling then after loop or pingPong overrides the loop chain (last call wins).
| Name | Type | Description |
|---|---|---|
callback | function |
- Source
- Type:
- Tween
(static) tweenProperty(target, propertyPath, start, end, durationopt, optionsopt) → {Tween}
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 instances, Color instances, or any object with a lerp(other, percent) => sameType method.
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
target | Object | The object whose property is being animated | ||
propertyPath | string | Dot-separated path, e.g. | ||
start | number | | Starting value | ||
end | number | | Ending value | ||
duration | number | <optional> | 1 | Duration in seconds |
options | Object | <optional> | Same options as the Tween constructor |
- Source
- Type:
- Tween
// 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();(static) tweenProperty(target, propertyPath, start, end, durationopt, optionsopt) → {Tween}
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 instances, Color instances, or any object with a lerp(other, percent) => sameType method.
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
target | Object | The object whose property is being animated | ||
propertyPath | string | Dot-separated path, e.g. | ||
start | number | | Starting value | ||
end | number | | Ending value | ||
duration | number | <optional> | 1 | Duration in seconds |
options | Object | <optional> | Same options as the Tween constructor |
- Source
- Type:
- Tween
// 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();(static) tweenStopAll()
Stop every active tween and clear their then-callbacks. Useful for resets on level transitions or when changing scenes.
- Source
(static) tweenStopAll()
Stop every active tween and clear their then-callbacks. Useful for resets on level transitions or when changing scenes.
- Source
(static) tweenUpdate(gameDeltaopt, realDeltaopt)
Engine plugin hook: advance every active tween by the appropriate delta. Called once per render frame by the engine (no arguments). May also be called explicitly with (gameDelta, realDelta) to drive tweens manually — useful for headless tests or custom replay/scrubbing systems.
| Name | Type | Attributes | Description |
|---|---|---|---|
gameDelta | number | <optional> | Game-time delta in seconds; default: time - lastTime |
realDelta | number | <optional> | Real-time delta in seconds; default: timeReal - lastTimeReal |
- Source
(static) tweenUpdate(gameDeltaopt, realDeltaopt)
Engine plugin hook: advance every active tween by the appropriate delta. Called once per render frame by the engine (no arguments). May also be called explicitly with (gameDelta, realDelta) to drive tweens manually — useful for headless tests or custom replay/scrubbing systems.
| Name | Type | Attributes | Description |
|---|---|---|---|
gameDelta | number | <optional> | Game-time delta in seconds; default: time - lastTime |
realDelta | number | <optional> | Real-time delta in seconds; default: timeReal - lastTimeReal |
- Source