@freestylejs/ani-core 1.1.0 → 1.2.0

package/dist/index.d.ts

@@ -46,37 +46,6 @@ interface Coord {
     y: number;
 }
 
-declare class LinearTimingFunction extends TimingFunction {
-    step(time: number, context: TimingFunctionContext): {
-        value: number;
-        endOfAnimation: boolean;
-    };
-}
-
-/** biome-ignore-all lint/style/noMagicNumbers: <>*/
-
-interface BezierTimingFunctionOpt {
-    p2: Coord;
-    p3: Coord;
-}
-declare class BezierTimingFunction extends TimingFunction {
-    readonly opt: {
-        p2: Coord;
-        p3: Coord;
-    };
-    constructor(opt: {
-        p2: Coord;
-        p3: Coord;
-    });
-    private readonly p1;
-    private readonly p4;
-    private _bezierFunction;
-    step(time: number, context: TimingFunctionContext): {
-        value: number;
-        endOfAnimation: boolean;
-    };
-}
-
 interface SpringTimingFunctionOpt {
     /**
      * Mass constant.
@@ -119,6 +88,38 @@ declare class DynamicSpringTimingFunction extends TimingFunction {
     };
 }
 
+interface BezierTimingFunctionOpt {
+    p2: Coord;
+    p3: Coord;
+}
+declare class BezierTimingFunction extends TimingFunction {
+    readonly opt: {
+        p2: Coord;
+        p3: Coord;
+    };
+    private sampleValues;
+    constructor(opt: {
+        p2: Coord;
+        p3: Coord;
+    });
+    private calcBezier;
+    private getSlope;
+    private getTForX;
+    private binarySubdivide;
+    private newtonRaphsonIterate;
+    step(time: number, context: TimingFunctionContext): {
+        value: number;
+        endOfAnimation: boolean;
+    };
+}
+
+declare class LinearTimingFunction extends TimingFunction {
+    step(time: number, context: TimingFunctionContext): {
+        value: number;
+        endOfAnimation: boolean;
+    };
+}
+
 /**
  * Core timing functions
  */
@@ -145,41 +146,158 @@ declare const T: {
      * Creates linear timing function instance.
      */
     readonly linear: () => LinearTimingFunction;
+    /**
+     * Standard CSS 'ease' timing function (0.25, 0.1, 0.25, 1.0).
+     */
+    readonly ease: () => BezierTimingFunction;
+    /**
+     * Standard CSS 'ease-in' timing function (0.42, 0, 1.0, 1.0).
+     */
+    readonly easeIn: () => BezierTimingFunction;
+    /**
+     * Standard CSS 'ease-out' timing function (0, 0, 0.58, 1.0).
+     */
+    readonly easeOut: () => BezierTimingFunction;
+    /**
+     * Standard CSS 'ease-in-out' timing function (0.42, 0, 0.58, 1.0).
+     */
+    readonly easeInOut: () => BezierTimingFunction;
 };
 
-interface Animatable {
+type AnimationId = string;
+type AnimationNodeType = string;
+type AnimationDuration = number;
+/**
+ * Nodes in the animation tree
+ */
+declare abstract class AnimationNode<G extends Groupable> {
+    abstract readonly type: AnimationNodeType;
+    abstract readonly duration: AnimationDuration;
+    readonly id?: AnimationId;
+    constructor(id?: AnimationId);
     /**
-     * Update animation based on dt
-     * @param dt delta time
+     * Constructs self node and its children into a flat execution plan.
+     * @param plan Execution plans to which segments will be added.
+     * @param startTime The absolute current start time for this node within the master timeline.
      */
-    update(dt: number): void;
+    abstract construct(plan: ExecutionPlan<G>, startTime: number): void;
 }
+type ExtractAnimationNode<AnimeNode> = AnimeNode extends AnimationNode<infer Group> ? Group : never;
+
+type CompositionChildren = readonly AnimationNode<Groupable>[];
+type CompositionPlan<Children extends CompositionChildren> = ExecutionPlan<ExtractAnimationNode<Children[number]>>;
 /**
- * Animation clock interface, can be user-injected.
+ * Composition animation
  */
-interface AnimationClockInterface {
-    subscribe(animatable: Animatable): void;
-    unsubscribe(animatable: Animatable): void;
-}
-declare class AnimationClock implements AnimationClockInterface {
-    private subscribers;
-    private animationFrameId;
-    private lastTimestamp;
-    private maxDeltaTime;
-    protected static clock: AnimationClock;
+declare abstract class CompositionNode<const Children extends CompositionChildren> extends AnimationNode<ExtractAnimationNode<Children[number]>> {
     /**
-     * Crete new clock(singleton)
-     * @param maxDeltaTime default maxDt = 100ms
-     * @returns clock
+     * Composition children nodes.
      */
-    static create(maxDeltaTime?: number): AnimationClock;
-    private constructor();
-    subscribe(animatable: Animatable): void;
-    unsubscribe(animatable: Animatable): void;
-    private start;
-    private stop;
-    private tick;
+    readonly children: Children;
+    constructor(children: Children, timing?: TimingFunction, id?: AnimationId);
+}
+
+interface SegmentNodeProps<G extends Groupable> {
+    readonly to: G;
+    readonly duration: number;
+    readonly timing?: SegmentTiming<G>;
 }
+/**
+ * Leaf node in the animation tree
+ */
+declare class SegmentNode<G extends Groupable> extends AnimationNode<G> {
+    readonly type = "SEGMENT";
+    readonly props: SegmentNodeProps<G>;
+    constructor(props: SegmentNodeProps<G>, id?: AnimationId);
+    get duration(): number;
+    construct(plan: ExecutionPlan<G>, startTime: number): void;
+}
+/**
+ * Single animation segment.
+ *
+ * @param props Animation config.
+ * @param id Optional ID for the node.
+ */
+declare function ani<G extends Groupable>(props: SegmentNodeProps<G>, id?: AnimationId): SegmentNode<G>;
+
+type PreserveRecord = Record<string, any>;
+/**
+ * Creates a pause in an animation sequence.
+ * @param duration Duration of the delay in `seconds`.
+ * @param id Optional ID for the node.
+ */
+declare function delay(duration: number, id?: AnimationId): SegmentNode<PreserveRecord>;
+
+/**
+ * Composition node that repeats a child animation node a specified number of times.
+ */
+declare class LoopNode<G extends Groupable> extends CompositionNode<readonly AnimationNode<G>[]> {
+    readonly type = "LOOP";
+    readonly duration: number;
+    readonly count: number;
+    readonly child: AnimationNode<G>;
+    constructor(child: AnimationNode<G>, loopCount: number, timing?: TimingFunction, id?: AnimationId);
+    construct(plan: CompositionPlan<readonly AnimationNode<G>[]>, startTime: number): void;
+}
+/**
+ * Create loop for children animation.
+ *
+ * @param child Target animation node to repeat.
+ * @param loopCount Loop count.
+ * @param timing Loop timing function.
+ * @param id Optional ID for the node.
+ */
+declare function loop<G extends Groupable>(child: AnimationNode<G>, loopCount: number, timing?: TimingFunction, id?: AnimationId): LoopNode<G>;
+
+/**
+ * Composition node that runs all of its children at the same time.
+ */
+declare class ParallelNode<const Children extends CompositionChildren> extends CompositionNode<Children> {
+    readonly type = "PARALLEL";
+    readonly duration: number;
+    constructor(children: Children, timing?: TimingFunction, id?: AnimationId);
+    construct(plan: CompositionPlan<Children>, startTime: number): void;
+}
+/**
+ * Parallel composition animation
+ * @param timing Loop timing function.
+ * @param id Optional ID for the node.
+ */
+declare function parallel<const Children extends CompositionChildren>(children: Children, timing?: TimingFunction, id?: AnimationId): ParallelNode<Children>;
+
+/**
+ * Composition node that runs its children one after another.
+ */
+declare class SequenceNode<const Children extends CompositionChildren> extends CompositionNode<Children> {
+    readonly type = "SEQUENCE";
+    readonly duration: number;
+    constructor(children: Children, timing?: TimingFunction, id?: AnimationId);
+    construct(plan: CompositionPlan<Children>, startTime: number): void;
+}
+/**
+ * Sequence composition animation
+ * @param timing Loop timing function.
+ * @param id Optional ID for the node.
+ */
+declare function sequence<const Children extends CompositionChildren>(children: Children, timing?: TimingFunction, id?: AnimationId): SequenceNode<Children>;
+
+/**
+ * Composition node that runs its children with a fixed delay between each start time.
+ */
+declare class StaggerNode<const Children extends CompositionChildren> extends CompositionNode<Children> {
+    readonly type = "STAGGER";
+    readonly duration: number;
+    readonly offset: number;
+    constructor(children: Children, offset: number, timing?: TimingFunction, id?: AnimationId);
+    construct(plan: CompositionPlan<Children>, startTime: number): void;
+}
+/**
+ * Stagger composition animation
+ * @param offset Children animation offset, in seconds.
+ * @param timing Loop timing function.
+ * @param id Optional ID for the node.
+ */
+declare function stagger<const Children extends CompositionChildren>(children: Children, offset: number, timing?: TimingFunction, id?: AnimationId): StaggerNode<Children>;
 
 declare const TransformFunctionMap: {
     readonly rotate: {
@@ -268,9 +386,6 @@ type WithLiteralRecord<Literal extends string, Value> = {
     [Key in Literal]?: Value;
 };
 
-type AnimePrimitive = readonly number[];
-type SegmentTiming<G extends Groupable = Groupable> = G extends AnimePrimitive ? readonly TimingFunction[] | TimingFunction : G extends GroupableRecord ? Record<keyof G, TimingFunction> | TimingFunction : never;
-
 /**
  * Animatable target values
  */
@@ -293,43 +408,50 @@ interface ExecutionSegment<G extends Groupable> {
     endTime: number;
 }
 type ExecutionPlan<G extends Groupable> = Array<ExecutionSegment<G>>;
-type TimelineStatus = 'IDLE' | 'PLAYING' | 'PAUSED' | 'ENDED';
-type OnUpdateCallback<G extends Groupable> = (current: {
-    state: AniGroup<G>;
-    status: TimelineStatus;
-}) => void;
-type ShouldKeepSymbol = 'keep';
-type Keyframe<G extends Groupable> = Array<G | ShouldKeepSymbol>;
-type Duration = Array<number | ShouldKeepSymbol>;
-interface TimelineStartingConfig<G extends Groupable, Ctx = any> {
+type AnimePrimitive = readonly number[];
+interface SegmentDefinition {
+    from: AnimePrimitive;
+    to: AnimePrimitive;
+    duration: number;
+    timing: SegmentTiming;
+}
+type SegmentTiming<G extends Groupable = Groupable> = G extends AnimePrimitive ? readonly TimingFunction[] | TimingFunction : G extends GroupableRecord ? Record<keyof G, TimingFunction> | TimingFunction : never;
+interface SegmentState {
+    values: AnimePrimitive;
+    isComplete: boolean;
+}
+
+/**
+ * Calculates the animated values for a single segment at a specific local time.
+ *
+ * @param localTime Time elapsed within this specific segment (from 0 to duration).
+ * @param segmentDef Target segment def
+ * @parma dt Delta time
+ * @returns Calculated values and whether the segment is complete.
+ */
+declare function calculateSegmentState(localTime: number, segmentDef: SegmentDefinition, dt?: number): SegmentState;
+
+interface TimelineCommonConfig<G extends Groupable> {
     /**
      * Starting dynamic value.
      */
-    from: AniGroup<G>;
+    from: G;
     /**
-     * Dynamic `from` values, if passed `keep` for specific index, keep original timeline config.
+     * Animation repeat count.
      */
-    keyframes?: Keyframe<G>;
+    repeat?: number;
     /**
-     * Dynamic `duration` values, if passed `keep` for specific index, keep original timeline config.
+     * Initial delay before animation starts (ms).
      */
-    durations?: Duration;
+    delay?: number;
     /**
-     * Custom context definition during animation cycle.
+     * Dynamic target overrides. Matches the order of SEGMENT nodes in the plan.
      */
-    context?: Ctx;
+    keyframes?: Array<G | 'keep'>;
     /**
-     * Animation repeat count.
-     *
-     * - if `Infinity` goes infinity repeat
+     * Dynamic duration overrides. Matches the order of SEGMENT nodes in the plan.
      */
-    repeat?: number;
-    /**
-     * Initial delay before animation starts.
-     *
-     * - unit = `MS`
-     */
-    delay?: number;
+    durations?: Array<number | 'keep'>;
     /**
      * Custom style property resolver.
      *
@@ -345,226 +467,147 @@ interface TimelineStartingConfig<G extends Groupable, Ctx = any> {
      */
     propertyResolver?: G extends AnimePrimitive ? never : Resolver<G>;
 }
-/**
- * Public timeline controller
- */
-interface TimelineController<G extends Groupable, Ctx = any> {
+declare abstract class TimelineBase<G extends Groupable> {
+    protected readonly rootNode: AnimationNode<G>;
+    readonly duration: number;
+    protected readonly _baseExecutionPlan: ExecutionPlan<G>;
+    protected _currentExecutionPlan: ExecutionPlan<G> | null;
+    constructor(rootNode: AnimationNode<G>);
     /**
-     * Play timeline
-     * @param config Timeline starting configuration
-     * @param canBeIntercepted if `true`, will play animation again even if already PLAYING.
+     * flatten the AST into a linear execution plan.
      */
-    play(config: TimelineStartingConfig<G, Ctx>, canBeIntercepted?: boolean): void;
+    private _constructExecutionPlan;
     /**
-     * Pause timeline
+     * Merges the base plan with runtime dynamic overrides.
      */
-    pause(): void;
+    protected _resolveExecutionPlan(keyframes?: Array<G | 'keep'>, durations?: Array<number | 'keep'>): ExecutionPlan<G>;
+    abstract play(...args: unknown[]): void;
     /**
-     * Resume timeline
+     * Pause animation.
      */
-    resume(): void;
+    abstract pause(): void;
     /**
-     * Seek to target time
-     * @param time
+     * Resume animation.
      */
-    seek(time: number): void;
+    abstract resume(): void;
     /**
-     * Reset timeline
+     * Reset(cancel) animation.
      */
-    reset(): void;
+    abstract reset(): void;
+    /**
+     * Seek to specific target time.
+     * @param targetTime Target seek time.
+     */
+    abstract seek(targetTime: number): void;
 }
-declare class Timeline<G extends Groupable, Ctx = any> implements TimelineController<G, Ctx>, Animatable {
+
+interface Animatable {
     /**
-     * Animation construction root node.
+     * Update animation based on dt
+     * @param dt delta time
      */
-    protected readonly rootNode: AnimationNode<G>;
-    readonly duration: number;
-    private readonly _baseExecutionPlan;
-    private _currentExecutionPlan;
+    update(dt: number): void;
+}
+/**
+ * Animation clock interface, can be user-injected.
+ */
+interface AnimationClockInterface {
+    subscribe(animatable: Animatable): void;
+    unsubscribe(animatable: Animatable): void;
+}
+declare class AnimationClock implements AnimationClockInterface {
+    private subscribers;
+    private animationFrameId;
+    private lastTimestamp;
+    private maxDeltaTime;
+    protected static clock: AnimationClock;
+    /**
+     * Crete new clock(singleton)
+     * @param maxDeltaTime default maxDt = 100ms
+     * @returns clock
+     */
+    static create(maxDeltaTime?: number): AnimationClock;
+    private constructor();
+    subscribe(animatable: Animatable): void;
+    unsubscribe(animatable: Animatable): void;
+    private start;
+    private stop;
+    private tick;
+}
+
+interface RafTimelineConfig<G extends Groupable, Ctx = any> extends TimelineCommonConfig<G> {
+    /**
+     * Custom context definition during animation cycle.
+     */
+    context?: Ctx;
+}
+type TimelineStatus = 'IDLE' | 'PLAYING' | 'PAUSED' | 'ENDED';
+type OnUpdateCallback<G extends Groupable> = (current: {
+    /**
+     * Current animation state
+     */
+    state: AniGroup<G>;
+    /**
+     * Current animation status
+     */
+    status: TimelineStatus;
+}) => void;
+declare class RafAniTimeline<G extends Groupable, Ctx = any> extends TimelineBase<G> implements Animatable {
     private readonly _clock;
     private _masterTime;
     private _delay;
     private _status;
     private _currentConfig;
-    /**
-     * Current animation running config.
-     */
-    get currentConfig(): TimelineStartingConfig<G, Ctx> | null;
+    get currentConfig(): RafTimelineConfig<G, Ctx> | null;
     private _state;
     private _initialState;
     private _repeatCount;
     private _propertyKeyMap;
-    private _segmentStartStates;
     private _onUpdateCallbacks;
-    constructor(
-    /**
-     * Animation construction root node.
-     */
-    rootNode: AnimationNode<G>, clock?: AnimationClockInterface);
-    /**
-     * Resolves a Group (like {x, y}) into keys and values.
-     */
-    private _resolveGroup;
-    /**
-     * Resolves the internal state (a number array) back into Group.
-     */
-    private _resolveStateToGroup;
+    constructor(rootNode: AnimationNode<G>, clock?: AnimationClockInterface);
+    getCurrentValue(): AniGroup<G> | null;
+    private _calculateStateAtTime;
+    private notify;
     /**
-     * Compile animation execution plan
+     * @private Internal clock subscription callback.
      */
-    private _constructExecutionPlan;
+    update(dt: number): void;
     /**
-     * Calculates the exact state of the animation at point.
+     * Plays animation.
+     * @param config {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame RequestAnimationFrame API} based config.
+     * @param canBeIntercepted if `true` animation can be intercepted even if already animation started.
      */
-    private _calculateStateAtTime;
-    private _resolveExecutionPlan;
-    private notify;
-    play(config: TimelineStartingConfig<G, Ctx>, canBeIntercepted?: boolean): void;
+    play(config: RafTimelineConfig<G, Ctx>, canBeIntercepted?: boolean): void;
     pause(): void;
     resume(): void;
     reset(notify?: boolean): void;
     seek(targetTime: number): void;
-    getCurrentValue(): AniGroup<G> | null;
-    onUpdate(callback: OnUpdateCallback<G>): () => void;
-    update(dt: number): void;
-}
-declare function timeline<G extends Groupable, Ctx = any>(rootNode: AnimationNode<G>, clock?: AnimationClockInterface): Timeline<G, Ctx>;
-
-type AnimationId = string;
-type AnimationNodeType = string;
-type AnimationDuration = number;
-/**
- * Nodes in the animation tree
- */
-declare abstract class AnimationNode<G extends Groupable> {
-    abstract readonly type: AnimationNodeType;
-    abstract readonly duration: AnimationDuration;
-    readonly id?: AnimationId;
-    constructor(id?: AnimationId);
-    /**
-     * Constructs self node and its children into a flat execution plan.
-     * @param plan Execution plans to which segments will be added.
-     * @param startTime The absolute current start time for this node within the master timeline.
-     */
-    abstract construct(plan: ExecutionPlan<G>, startTime: number): void;
-}
-type ExtractAnimationNode<AnimeNode> = AnimeNode extends AnimationNode<infer Group> ? Group : never;
-
-type CompositionChildren = readonly AnimationNode<Groupable>[];
-type CompositionPlan<Children extends CompositionChildren> = ExecutionPlan<ExtractAnimationNode<Children[number]>>;
-/**
- * Composition animation
- */
-declare abstract class CompositionNode<const Children extends CompositionChildren> extends AnimationNode<ExtractAnimationNode<Children[number]>> {
     /**
-     * Composition children nodes.
+     * When timeline updates, subscribes on update callback.
+     * @param callback Subscription callback.
+     * @returns Unsubscribe.
      */
-    readonly children: Children;
-    constructor(children: Children, timing?: TimingFunction, id?: AnimationId);
-}
-
-interface SegmentNodeProps<G extends Groupable> {
-    readonly to: G;
-    readonly duration: number;
-    readonly timing?: SegmentTiming<G>;
-}
-/**
- * Leaf node in the animation tree
- */
-declare class SegmentNode<G extends Groupable> extends AnimationNode<G> {
-    readonly type = "SEGMENT";
-    readonly props: SegmentNodeProps<G>;
-    constructor(props: SegmentNodeProps<G>, id?: AnimationId);
-    get duration(): number;
-    construct(plan: ExecutionPlan<G>, startTime: number): void;
-}
-/**
- * Factory function to create a ani SegmentNode.
- */
-declare function ani<G extends Groupable>(props: SegmentNodeProps<G>, id?: AnimationId): SegmentNode<G>;
-
-type PreserveRecord = Record<string, any>;
-/**
- * Creates a pause in an animation sequence.
- * @param duration The duration of the delay in seconds.
- * @param id Optional ID for the node.
- */
-declare function delay(duration: number, id?: AnimationId): SegmentNode<PreserveRecord>;
-
-/**
- * Composition node that repeats a child animation node a specified number of times.
- */
-declare class LoopNode<G extends Groupable> extends CompositionNode<readonly AnimationNode<G>[]> {
-    readonly type = "LOOP";
-    readonly duration: number;
-    readonly count: number;
-    readonly child: AnimationNode<G>;
-    constructor(child: AnimationNode<G>, loopCount: number, timing?: TimingFunction, id?: AnimationId);
-    construct(plan: CompositionPlan<readonly AnimationNode<G>[]>, startTime: number): void;
-}
-/**
- * Repeats a child animation node a specified number of times.
- * @param child The animation node to repeat.
- * @param loopCount The number of times to repeat the child node.
- * @param timing loop timing function.
- * @param id Optional ID for the node.
- */
-declare function loop<G extends Groupable>(child: AnimationNode<G>, loopCount: number, timing?: TimingFunction, id?: AnimationId): LoopNode<G>;
-
-/**
- * Composition node that runs all of its children at the same time.
- */
-declare class ParallelNode<const Children extends CompositionChildren> extends CompositionNode<Children> {
-    readonly type = "PARALLEL";
-    readonly duration: number;
-    constructor(children: Children, timing?: TimingFunction, id?: AnimationId);
-    construct(plan: CompositionPlan<Children>, startTime: number): void;
-}
-/**
- * Parallel composition animation
- */
-declare function parallel<const Children extends CompositionChildren>(children: Children, timing?: TimingFunction, id?: AnimationId): ParallelNode<Children>;
-
-/**
- * Composition node that runs its children one after another.
- */
-declare class SequenceNode<const Children extends CompositionChildren> extends CompositionNode<Children> {
-    readonly type = "SEQUENCE";
-    readonly duration: number;
-    constructor(children: Children, timing?: TimingFunction, id?: AnimationId);
-    construct(plan: CompositionPlan<Children>, startTime: number): void;
-}
-/**
- * Sequence composition animation
- */
-declare function sequence<const Children extends CompositionChildren>(children: Children, timing?: TimingFunction, id?: AnimationId): SequenceNode<Children>;
-
-interface StaggerNodeProps {
-    offset: number;
-    timing?: TimingFunction;
-}
-/**
- * Composition node that runs its children with a fixed delay between each start time.
- */
-declare class StaggerNode<const Children extends CompositionChildren> extends CompositionNode<Children> {
-    readonly type = "STAGGER";
-    readonly duration: number;
-    readonly offset: number;
-    constructor(children: Children, props: StaggerNodeProps, id?: AnimationId);
-    construct(plan: CompositionPlan<Children>, startTime: number): void;
+    onUpdate(callback: OnUpdateCallback<G>): () => void;
 }
 /**
- * Stagger composition animation
+ * Create dynamic timeline. {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame RequestAnimationFrame API} based.
+ * @param rootNode Root animation node.
+ * @param clock [Custom clock]
  */
-declare function stagger<const Children extends CompositionChildren>(children: Children, props: StaggerNodeProps, id?: AnimationId): StaggerNode<Children>;
+declare function rafTimeline<G extends Groupable, Ctx = any>(rootNode: AnimationNode<G>, clock?: AnimationClockInterface): RafAniTimeline<G, Ctx>;
 
 type AnimationStateShape = Record<string, AnimationNode<Groupable>>;
-type GetTimeline<State extends AnimationStateShape> = Timeline<ExtractAnimationNode<State[keyof State]>, any>;
+type GetTimeline<State extends AnimationStateShape> = RafAniTimeline<ExtractAnimationNode<State[keyof State]>, any>;
+type TimelineChangeCallback<AnimationStates extends AnimationStateShape> = (timeline: GetTimeline<AnimationStates>) => void;
 interface StateController<AnimationStates extends AnimationStateShape> {
     /**
      * Get current timeline.
      */
     timeline: () => GetTimeline<AnimationStates>;
+    /**
+     * Get current state.
+     */
+    state: () => keyof AnimationStates;
     /**
      * Transition timeline animation into another state.
      * @param newState transition target.
@@ -572,13 +615,13 @@ interface StateController<AnimationStates extends AnimationStateShape> {
      * @param timelineConfig animation play config.
      * @param canBeIntercepted animation canBeIntercepted config.
      */
-    transitionTo(newState: keyof AnimationStates, timelineConfig?: TimelineStartingConfig<ExtractAnimationNode<AnimationStates[keyof AnimationStates]>, any>, canBeIntercepted?: boolean): void;
+    transitionTo(newState: keyof AnimationStates, timelineConfig?: RafTimelineConfig<ExtractAnimationNode<AnimationStates[keyof AnimationStates]>, any>, canBeIntercepted?: boolean): void;
     /**
      * Subscribe to timeline changes.
      * @param callback
      * @returns unsubscribe function
      */
-    onTimelineChange(callback: (newTimeline: GetTimeline<AnimationStates>) => void): () => void;
+    onTimelineChange(callback: TimelineChangeCallback<AnimationStates>): () => void;
 }
 interface StateProps<AnimationStates extends AnimationStateShape> {
     /**
@@ -607,6 +650,52 @@ interface StateProps<AnimationStates extends AnimationStateShape> {
  */
 declare function createStates<AnimationStates extends AnimationStateShape>(config: StateProps<AnimationStates>): StateController<AnimationStates>;
 
+interface WebAniKeyframe extends Record<string, string | number | null> {
+    offset: number;
+    easing?: string;
+}
+/**
+ * Compiles an ExecutionPlan into WAAPI Keyframes.
+ * @param plan The resolved execution plan (from TimelineBase).
+ * @param initialFrom The initial state (values).
+ */
+declare function compileToKeyframes<G extends Groupable>(plan: ExecutionPlan<G>, initialFrom: G): WebAniKeyframe[];
+
+interface WebAniTimelineConfig<G extends Groupable> extends TimelineCommonConfig<G> {
+    /**
+     * Web Animations API config.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#options KeyframeEffect Options}.
+     */
+    keyframeEffect?: Omit<KeyframeEffectOptions, 'duration' | 'iterations' | 'delay'>;
+}
+declare class WebAniTimeline<G extends Groupable> extends TimelineBase<G> {
+    private _animation;
+    private _keyframes;
+    constructor(rootNode: AnimationNode<G>);
+    /**
+     * Plays animation.
+     * @param target Target element.
+     * @param config {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API Web Animations API} based config.
+     */
+    play(target: Element, config: WebAniTimelineConfig<G>): Animation | null;
+    pause(): void;
+    resume(): void;
+    reset(): void;
+    seek(targetTime: number): void;
+    /**
+     * Native animation object.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Animation Animation}.
+     */
+    get nativeAnimation(): Animation | null;
+}
+/**
+ * Create web timeline. {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API Web Animations API} based.
+ * @param rootNode Root animation node.
+ */
+declare function webTimeline<G extends Groupable>(rootNode: AnimationNode<G>): WebAniTimeline<G>;
+
 type EventHandler<AnimationContext = any, EvtKeys extends EventKey = EventKey> = (animationContext: AnimationContext, ev: HTMLElementEventMap[EvtKeys]) => any;
 type EventHandlerRegistration<AnimationContext = any, Keys extends EventKey = EventKey> = PartialRecord<WithPrefix<'on', Capitalize<Keys>>, EventHandler<AnimationContext, Keys>>;
 type EventKey = keyof HTMLElementEventMap;
@@ -632,17 +721,17 @@ declare class EventManager<SupportedEventList extends readonly EventKey[] = Even
     bind(element: HTMLElement): void;
 }
 
-type AniRefContext<G extends Groupable> = TimelineController<G> & {
+type AniRefContext<G extends Groupable> = TimelineBase<G> & {
     /**
      * Current animation value
      */
     current: AniGroup<G> | null;
 };
-interface AniRefProps<G extends Groupable, AsGetter extends boolean = false> {
+interface AniRefProps<Timeline extends TimelineBase<G>, G extends Groupable, AsGetter extends boolean = false> {
     /**
      * The compositional timeline to bind to the element.
      */
-    timeline: AsGetter extends true ? () => Timeline<G> : Timeline<G>;
+    timeline: AsGetter extends true ? () => Timeline : Timeline;
     /**
      * The initial style to apply to the element before the animation plays.
      */
@@ -665,15 +754,26 @@ declare const a: {
         readonly spring: (opt: SpringTimingFunctionOpt) => SpringTimingFunction;
         readonly dynamicSpring: (opt: SpringTimingFunctionOpt) => DynamicSpringTimingFunction;
         readonly linear: () => LinearTimingFunction;
+        readonly ease: () => BezierTimingFunction;
+        readonly easeIn: () => BezierTimingFunction;
+        readonly easeOut: () => BezierTimingFunction;
+        readonly easeInOut: () => BezierTimingFunction;
     };
+    readonly dynamicTimeline: typeof rafTimeline;
+    readonly timeline: typeof webTimeline;
+    /**
+     * Create animation segment.
+     */
     readonly ani: typeof ani;
-    readonly createStates: typeof createStates;
+    /**
+     * Add delay
+     */
     readonly delay: typeof delay;
     readonly loop: typeof loop;
     readonly parallel: typeof parallel;
     readonly sequence: typeof sequence;
     readonly stagger: typeof stagger;
-    readonly timeline: typeof timeline;
+    readonly createStates: typeof createStates;
 };
 
-export { type AniGroup, type AniRefContext, type AniRefProps, type Animatable, AnimationClock, type AnimationClockInterface, type AnimationDuration, type AnimationId, AnimationNode, type AnimationNodeType, type AnimationStateShape, CompositionNode, type Coord, type EventHandler, type EventHandlerRegistration, type EventKey, EventManager, type ExecutionPlan, type ExecutionSegment, type GetTimeline, type Groupable, type GroupableRecord, type GroupableRecordKey, LinearTimingFunction, type OnUpdateCallback, ParallelNode, type Resolver, SegmentNode, SequenceNode, StaggerNode, type StateController, type StateProps, type StylesheetSupportedLiteral, T, Timeline, type TimelineController, type TimelineStartingConfig, TimingFunction, type TimingFunctionContext, a, ani, createStates, createStyleSheet, delay, loop, parallel, sequence, stagger, timeline };
+export { type AniGroup, type AniRefContext, type AniRefProps, type Animatable, AnimationClock, type AnimationClockInterface, type AnimationStateShape, type AnimePrimitive, BezierTimingFunction, type BezierTimingFunctionOpt, type Coord, type EventHandler, type EventHandlerRegistration, type EventKey, EventManager, type ExecutionPlan, type ExecutionSegment, type GetTimeline, type Groupable, type GroupableRecord, type GroupableRecordKey, LinearTimingFunction, type OnUpdateCallback, RafAniTimeline, type RafTimelineConfig, type Resolver, type SegmentDefinition, type SegmentState, type SegmentTiming, type StateController, type StateProps, type StylesheetSupportedLiteral, T, TimelineBase, type TimelineCommonConfig, TimingFunction, type TimingFunctionContext, type WebAniKeyframe, WebAniTimeline, type WebAniTimelineConfig, a, calculateSegmentState, compileToKeyframes, createStates, createStyleSheet, rafTimeline, webTimeline };