Animation

The @shell/animate package provides an ECS-native tween and timeline system. It stores all animation state as Tween components, enabling efficient batch processing via iter() for maximum cache coherence.

Setup

Register the plugin on your world:

import { AnimatePlugin } from '@shell/animate';

world.addPlugin(AnimatePlugin);

This registers:

• Tween component for per-property animation state
• Animate resource (IoC key: 'animate') for the user-facing API
• TimelineSystem at PostUpdate for timeline advancement
• TweenSystem at PostUpdate for batch tween processing

The timeline system runs before the tween system so that newly-spawned tween entities from timeline segments are processed in the same frame.

Access

Retrieve the Animate resource inside any system:

const animate = resources.get('animate');

Topics

• Tweens — Animate individual component properties
• Timelines — Compose and sequence animations
• Easing — Built-in easing functions and custom registration

Exports

export { AnimatePlugin } from './plugin';
export { Animate, TweenHandle } from './resource';
export { EcsTimeline } from './timeline';
export { Tween } from './components';
export { AnimationTimeSource, TweenState } from './types';
export type {
  AnimatableProperties,
  TweenCallback,
  TweenOptions,
  TimelineOptions,
  TimelineTweenOptions,
  TimelinePosition,
} from './types';
export type { EasingFn, EasingName } from './easing';
export { EasingTable, EasingIndex } from './easing';