API reference

import type { AnimateOptions, Controls, ElementOptions, MotionValue, ObjectValues, Target, ValueKeyframes, ValueOptions, Values } from "@animaly/dom";

declare function animate(target: Target, values: Values, options?: ElementOptions): Controls;
declare function animate<T extends number | string>(value: MotionValue<T>, keyframes: ValueKeyframes<T>, options?: ValueOptions<T>): Controls;
declare function animate(from: number, to: ValueKeyframes<number>, options?: ValueOptions<number>): Controls;
declare function animate(from: string, to: ValueKeyframes<string>, options?: ValueOptions<string>): Controls;
declare function animate<Subject extends object>(target: Subject | readonly Subject[], values: ObjectValues, options?: ValueOptions<Subject>): Controls;

export type { AnimateOptions };

import { animate } from "@animaly/dom";

animate(".button", { scale: [1, 0.95, 1], backgroundColor: "#7c3aed" }, { duration: 0.25 });

import { animate } from "@animaly/dom";

animate(0, 1, { type: "spring", onUpdate: (latest) => console.log(latest) });

import { animate } from "@animaly/dom";

animate([
  [".title", { y: [20, 0], opacity: [0, 1] }, { duration: 0.4 }],
  [".lede", { opacity: [0, 1] }, { at: "-0.2" }],
]);

import type { Ease, InertiaOptions, KeyframeOptions, SpringOptions } from "@animaly/core";
import type { Stagger } from "@animaly/dom";

type Delay = number | Stagger;

type TweenAnimation = { type?: "tween" | "keyframes"; delay?: Delay } & Omit<KeyframeOptions, "delay">;
type SpringAnimation = { type: "spring"; delay?: Delay } & Omit<SpringOptions, "delay">;
type InertiaAnimation = { type: "inertia"; delay?: Delay } & Omit<InertiaOptions, "delay">;

type AnimateOptions = TweenAnimation | SpringAnimation | InertiaAnimation;

export type { AnimateOptions, Ease };

type Controls = {
  time: number;
  speed: number;
  readonly duration: number;
  readonly finished: Promise<void>;
  pause(): void;
  play(): void;
  stop(): void;
  complete(): void;
  cancel(): void;
  then(onResolve?: () => unknown, onReject?: (reason: unknown) => unknown): Promise<unknown>;
};

export type { Controls };

import { animate } from "@animaly/dom";

const controls = animate(".panel", { x: 300 }, { duration: 2 });

controls.pause();
controls.time = 0.5;
controls.speed = 2;
controls.play();

await controls.finished;
console.log("done");

import type { Ease } from "@animaly/core";

type StaggerOptions = { startDelay?: number; from?: "first" | "last" | "center" | number; ease?: Ease };

declare function stagger(duration?: number, options?: StaggerOptions): (index: number, total: number) => number;

export type { StaggerOptions };

import { animate, stagger } from "@animaly/dom";

animate(".dot", { scale: [1, 1.5, 1] }, { duration: 0.5, delay: stagger(0.08, { from: "center", startDelay: 0.2 }) });

import { stagger } from "@animaly/dom";

const delay = stagger(0.1, { from: "last" });
console.log([0, 1, 2, 3].map((index) => delay(index, 4).toFixed(1))); // ["0.3", "0.2", "0.1", "0.0"]

import type { AnimateOptions, Target, Values } from "@animaly/dom";

type At = number | string;
type Segment = readonly [Target, Values] | readonly [Target, Values, AnimateOptions & { at?: At }];
type Label = string | { name: string; at: At };
type Sequence = readonly (Segment | Label)[];
type SequenceOptions = { repeat?: number; delay?: number; defaultTransition?: AnimateOptions };

export type { Sequence, SequenceOptions };

import { animate } from "@animaly/dom";

animate(
  [
    [".a", { x: 100 }],
    "middle",
    [".b", { x: 100 }, { at: "middle" }],
  ],
  { repeat: 1, delay: 0.2, defaultTransition: { duration: 0.3, ease: "easeOut" } },
);

import type { MotionValue } from "@animaly/dom";

declare function motionValue(initial: number): MotionValue<number>;
declare function motionValue(initial: string): MotionValue<string>;

export type { MotionValue };

import { animate, motionValue } from "@animaly/dom";

const x = motionValue(0);
x.on("change", (latest) => console.log(latest));
animate(x, 100, { type: "spring" });

import type { Scheduler } from "@animaly/core";
import type { Animator } from "@animaly/dom";

type AnimatorOptions = { scheduler?: Scheduler; maxAccelerated?: number; colorMix?: "linear" | "squared" };

declare function createAnimator(options?: AnimatorOptions): Animator;
declare function sharedAnimator(): Animator;

export type { AnimatorOptions };

import { createAnimator } from "@animaly/dom";

const animator = createAnimator({ maxAccelerated: 0, colorMix: "squared" });

animator.animate(".tile", { x: 80, backgroundColor: "#ec4899" }, { duration: 0.4 });

import { animate, sharedAnimator } from "@animaly/dom";

const box = document.querySelector<HTMLElement>(".box")!;
animate(box, { x: 200 }, { duration: 1 });

setTimeout(() => {
  const animator = sharedAnimator();
  console.log(animator.isAnimating(box, "x"), Math.round(animator.valueOf(box, "x") ?? 0));
}, 300);

import { canAnimate } from "@animaly/dom";

const box = document.querySelector<HTMLElement>(".box")!;

console.log(canAnimate(box, "x")); // true
console.log(canAnimate(box, "--accent")); // true
console.log(canAnimate(box, "notAProperty")); // false

import { parseColor } from "@animaly/dom";

console.log(parseColor("#7c3aed")); // [124, 58, 237, 1]
console.log(parseColor("rgba(236, 72, 153, 0.5)")); // [236, 72, 153, 0.5]