Skip to content

ValueAnimation ​

Value animations with spring and curve timing

Supports animating floats, vectors, colors, transforms, and rotations with automatic type detection and appropriate interpolation (lerp for most types, slerp for rotations).

Example:

javascript
// Animate opacity
animateValue({
    from: 0,
    to: 1,
    duration: 0.5,
    onUpdate: function(value) {
        entity.opacity = value;
    }
});

// Spring animation on position
animateValue({
    from: Vector3(0, 0, 0),
    to: Vector3(0, 2, 0),
    spring: { duration: 0.6, bounce: 0.3 },
    onUpdate: function(pos) {
        entity.position = pos;
    }
});

// Transform animation (position + rotation + scale in one)
animateValue({
    from: entity.transform,
    to: Transform({
        position: Vector3(0, 0.3, 0),
        rotation: Rotation(0, Math.PI, 0),
        scale: Vector3(1, 1, 1)
    }),
    spring: { duration: 0.8, bounce: 0.5 },
    onUpdate: function(t) {
        entity.transform = t;
    }
});

// Color transition
animateValue({
    from: Color.red(),
    to: Color.blue(),
    duration: 1,
    curve: 'easeInOut',
    onUpdate: function(color) {
        // apply color
    }
});

// Rotation with automatic slerp
animateValue({
    from: Rotation(0, 0, 0),
    to: Rotation(0, Math.PI, 0),
    duration: 0.8,
    onUpdate: function(rot) {
        entity.rotation = rot;
    }
});

Properties ​

isPlaying ​

  • Type: boolean
  • Whether the animation is currently playing

Methods ​

destroy() ​

javascript
destroy(): void

Stop and clean up the animation permanently

Animations clean up automatically when they complete. Call destroy() only for infinite animations or early termination.

Returns: void

start() ​

javascript
start(): void

Start or resume the animation

Returns: void

stop() ​

javascript
stop(): void

Pause the animation (can be resumed with start())

Returns: void