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