import { type ReducedMotionBehavior } from '../a11y/config'; import { type EasingInput } from '../physics/easing-registry'; import type { SpringOptions } from '../physics/spring'; import type { Scheduler } from '../scheduler/scheduler'; import { type AnimationHandle } from '../value/animatable'; import type { DelayFn } from '../compose/stagger-delay'; import { type KeyframeInput } from './keyframes'; import { type AnimatableElement, type AnimationTarget } from './resolve-target'; import { type RelativeValue, type ValueFn } from './resolve-value'; import { type OriginChannel, type TransformChannel } from './transform'; type Channel = TransformChannel | OriginChannel | 'opacity'; /** A CSS value the registry path animates: a number or a CSS string. */ export type AnimateValue = number | string; /** * Keyframe waypoints. Each entry is a bare value, `null` (from-current at index 0, * a hold later), or an expressive `{ value, at, ease }` stop for per-segment * position and easing. */ export type AnimateKeyframes = ReadonlyArray>; export type NumericKeyframes = ReadonlyArray>; /** * Any property key that is NOT one of the five numeric channels: a * CSSStyleDeclaration property (camelCase), a custom property, or an `attr:name` * key routed to setAttribute (SVG/element attributes - viewBox, r, points). A typo * like `{ opactiy: 1 }` does not compile. (CSSStyleDeclaration method names * type-check as keys - accepted noise.) */ export type AnimateProperty = Exclude, Channel> | `--${string}` | `attr:${string}`; /** A numeric-channel key: a transform/origin channel, opacity, or the autoAlpha alias (opacity + visibility). */ type NumericKey = Channel | 'autoAlpha'; export type { AnimationTarget } from './resolve-target'; export type { RelativeValue, ValueFn } from './resolve-value'; /** A numeric-channel target: absolute, keyframes, a relative string, or a per-target function. */ type ResolvableNumeric = number | NumericKeyframes | RelativeValue | ValueFn; /** A registry-property target: absolute, keyframes, a relative string, or a per-target function. */ type ResolvableProperty = AnimateValue | AnimateKeyframes | RelativeValue | ValueFn; /** * The five channels stay numeric; everything else routes through the value-type * registry. Each value may also be a relative string (`'+=100'`) resolved against * the current value, or a per-target function `(index, element, count) => value`. * The keys are unchanged, so a typo like `{ opactiy: 1 }` still does not compile. */ export type AnimateTargets = Partial> & Partial>; /** A from-state numeric value: absolute, a relative string, or a per-target function (no keyframes - a from-state is one value). */ type FromNumeric = number | RelativeValue | ValueFn; /** A from-state registry value: absolute, a relative string, or a per-target function (no keyframes). */ type FromProperty = AnimateValue | RelativeValue | ValueFn; /** * An entrance from-state: the same keys and value forms as a target (channels * plus arbitrary CSS properties; absolute, relative `'+='`, or a per-target * function), but a single value per key - a from-state is one point, not a * keyframe path. Resolved per element against the live value at the call. */ export type FromTargets = Partial> & Partial>; export interface AnimateOptions extends Omit { /** ms - providing a duration switches to the tween escape hatch. */ duration?: number; easing?: EasingInput; scheduler?: Scheduler; /** * Per-target start delay. A number staggers each target by index*delay; a * `DelayFn` from `staggerDelay()` is an expressive wave (origin, grid, axis, * easing). On a single element it is just a flat lead-in. */ delay?: number | DelayFn; /** Element-level reduced-motion strategy - 'fade' keeps opacity AND colors animated. */ reducedMotion?: ReducedMotionBehavior; /** * Entrance from-state. Each key is set to its from-value SYNCHRONOUSLY at the * call (no flash, no manual setStyle), then animated to `targets`. With a * stagger `delay`, every element is parked at its from-state immediately and * holds it through its own delay, like a real entrance. Same value forms as a * target (absolute, relative `'+='`, per-target function), resolved per element * against the live value. Under reduced motion the from-set is skipped: the * element ends at `targets`, never stranded at the from-state. The `from()` and * `fromTo()` helpers are thin sugar over this option. */ from?: FromTargets; /** Fired once when the animation begins. */ onStart?(this: object, handle: AnimationHandle): void; /** * Per frame with the live numeric channel values (`{ x, y, scale, ... }`). Requesting it * runs the JS path (a per-frame tick), so it skips the WAAPI compositor fast path. Unlike a * single value's `onUpdate`, this is NOT change-guarded - it ticks every frame of the run * (a multi-channel object has no single "changed"); guard in the callback if you need to. */ onUpdate?(this: object, values: Record, handle: AnimationHandle): void; /** Fired once when every channel settles (no channel was interrupted). */ onComplete?(this: object, handle: AnimationHandle): void; /** Fired once when a channel is superseded by a later animate(), or the handle is stopped. */ onInterrupt?(this: object, handle: AnimationHandle): void; /** The `this` receiver for the callbacks. Defaults to the handle. */ scope?: object; } /** The slice of a WAAPI Animation the delegation relies on (testable shape). */ export interface DelegatedAnimation { currentTime: CSSNumberish | null; onfinish: (() => void) | null; cancel(): void; playbackRate?: number; pause?(): void; play?(): void; } /** Internal handle the playback layer maps controls onto. Not re-exported from the package entry. */ export interface DelegatedControls { readonly animation: DelegatedAnimation; readonly durationMs: number; } /** * Internal seam for @underlying/core/playback: the live WAAPI animation an * element's delegated tween rides, so playback can map pause/seek/timeScale/ * reverse onto native compositor controls. Returns null on the JS path. NOT * exported from the package entry (index.ts). */ export declare function __getDelegated(element: AnimatableElement): DelegatedControls | null; /** * Imperative escape hatch: spring (default) or tween style channels. The target * is one element, an array, a NodeList, or a CSS selector - one handle drives the * whole set. Each value may be a relative string (`'+=100'`, resolved against the * live value) or a per-target function `(index, element, count)`. `delay` staggers * the starts (a number, or a `staggerDelay()` wave). The five numeric channels * keep their compositor fast path; everything else routes through the value * registry. Repeated calls retarget the same underlying values - never a jump. * * Multi-target lifecycle is set-level: `onComplete` fires when the WHOLE set has * settled, `onInterrupt` when the first element is interrupted, `onUpdate` reports * the first element's channels. */ export declare function animate(target: AnimatableElement, targets: AnimateTargets, options?: AnimateOptions): AnimationHandle; export declare function animate(target: AnimationTarget, targets: AnimateTargets, options?: AnimateOptions): AnimationHandle; /** * Entrance: animate each target element FROM `fromValues` INTO its natural * (current) state, with no manual setStyle first. Each element's current value is * captured per key as its own to-state (so a set animates to PER-element naturals), * the from-state is set synchronously (no flash, held through any stagger delay), * then the element springs/tweens back. One aggregate handle drives the whole set. * * Same options as `animate()` - `delay`/`staggerDelay()`, lifecycle, spring config, * reduced motion (under which each element ends at its natural state, not the * from-state). If an element is mid-animation, the captured to is its live value, * so the hand-off has no jump. From-values take the same forms as a target * (absolute, relative `'+='`, per-target function), resolved against the live value. */ export declare function from(target: AnimationTarget, fromValues: FromTargets, options?: AnimateOptions): AnimationHandle; /** * Animate each target element FROM an explicit `fromValues` TO an explicit * `toValues`. The from-state is set synchronously (no flash, held through any * stagger delay), then the element animates to the to-state. Thin sugar over * `animate(target, toValues, { ...options, from: fromValues })`: `toValues` keep * full target parity (keyframes, relatives, per-target functions); `fromValues` * are a single per-key state. Shares every `animate()` option (stagger, lifecycle, * spring config, reduced motion - under which it settles straight to `toValues`). */ export declare function fromTo(target: AnimationTarget, fromValues: FromTargets, toValues: AnimateTargets, options?: AnimateOptions): AnimationHandle; export interface SetStyleOptions { /** * Seed a velocity (channel-unit/s) along with the values - gesture handoffs. * Broadcast to every channel of every touched property; exact for * single-channel values, which is the gesture case. */ velocity?: number; scheduler?: Scheduler; } /** * Teleport: cancel animations on the touched properties only, write the style, * and keep the registry channel state coherent - unlike a raw element.style * write, which desyncs the cache. Seed a velocity for a following spring/decay * to inherit (the drag-release handoff). Registry properties write synchronously * (zero-latency scrubbing); numeric channels reflect on the next frame. */ export declare function setStyle(element: AnimatableElement, targets: Partial> & Partial>, options?: SetStyleOptions): void; /** * Forget the element: reclaim any delegated tween, dispose every channel, group, * and binding, remove the inline styles we wrote. The next animate() starts cold * (re-reads computed style). The sanctioned uncache hatch after an external * style write. Idempotent; an unknown element is a no-op. */ export declare function releaseStyle(element: AnimatableElement): void; //# sourceMappingURL=animate.d.ts.map