@infinityfx/lively/dist/types/animatable.d.ts

Feature complete, lightweight react animation library.

import Clip, { AnimatableInitials, ClipProperties } from "./core/clip";
import { Trigger } from "./hooks/use-trigger";
import Timeline, { PlayOptions } from "./core/timeline";
import { CachableKey } from "./core/cache";
type StaticTrigger = 'mount' | 'unmount';
export type AnimatableType<T extends string = any> = {
    play: (animation: T | 'animate', options?: PlayOptions, layer?: number) => number;
    trigger: (trigger: StaticTrigger, options?: PlayOptions) => number;
    stop: () => void;
    timeline: Timeline;
    children: React.RefObject<AnimatableType | null>[];
    inherit: boolean | undefined;
    adaptive: boolean;
    group: string | undefined;
    id: string;
};
type SharedProps<T extends string = any> = {
    group?: string;
    animations?: {
        [key in T]: ClipProperties | Clip;
    };
    triggers?: ({
        name?: T | 'animate';
        on: Trigger | boolean | StaticTrigger;
    } & PlayOptions)[];
    animate?: ClipProperties | Clip;
    initial?: AnimatableInitials;
    /**
     * How much to stagger child elements' animations by in seconds.
     *
     * @default 0.1
     */
    stagger?: number;
    /**
     * Integer number, after which child elements no longer stagger their animation, but play all at once.
     *
     * @default 10
     */
    staggerLimit?: number;
    /**
     * Whether scale animations will cause artifacting to `border-radius` and/or child elements.
     *
     * @default true
     */
    deform?: boolean;
    disabled?: boolean;
    paused?: boolean;
};
export type AnimatableProps<T extends string = any> = {
    ref?: React.Ref<AnimatableType>;
    children: React.ReactNode;
    /**
     * A unique identifier within a [`LayoutGroup`](https://lively.infinityfx.dev/docs/components/layout-group) parent.
     */
    id?: string;
    /**
     * Where in the order of a cascade animation this component should play it's animations.
     */
    order?: number;
    /**
     * Whether to participate in cascade animations and inherit animation properties from a parent.
     *
     * @default false
     */
    inherit?: boolean;
    /**
     * Whether to **not** participate in cascading animations.
     *
     * @default false
     */
    passthrough?: boolean;
    /**
     * Whether to animate layout changes when this component is a child of a [`LayoutGroup`](https://lively.infinityfx.dev/docs/components/layout-group).
     *
     * @default false
     */
    adaptive?: boolean;
    /**
     * Which properties to keep track of for layout change animations.
     *
     * @default ['x', 'y', 'sx', 'sy', 'rotate', 'color', 'backgroundColor', 'borderRadius', 'opacity']
     */
    cachable?: CachableKey[];
    /**
     * Whether to disable automatic mount/unmount triggering.
     *
     * @default false
     */
    manual?: boolean;
    onAnimationEnd?: (animation: T | 'animate') => void;
    /**
     * Whether to observe layout changes within children, when this component is a child of a [`LayoutGroup`](https://lively.infinityfx.dev/docs/components/layout-group).
     *
     * @default false
     */
    traverseLayout?: boolean;
} & SharedProps<T>;
type AnimatableContext = {
    index?: number;
    add: (child: React.RefObject<AnimatableType | null>) => void;
    remove: (child: React.RefObject<AnimatableType | null>) => void;
} & SharedProps;
export declare const AnimatableContext: import("react").Context<AnimatableContext | null>;
/**
 * Wrap around a react component to animate it.
 *
 * @see {@link https://lively.infinityfx.dev/docs/components/animatable}
 */
declare function Animatable<T extends string>(props: AnimatableProps<T>): import("react/jsx-runtime").JSX.Element;
declare namespace Animatable {
    var isLively: boolean;
}
export default Animatable;