@humanspeak/svelte-motion/dist/utils/optimizedAppear.d.ts

Framer Motion for Svelte 5. Declarative motion.<tag> components with AnimatePresence exit animations, gestures (hover, tap, drag, focus, in-view), variants, FLIP layout animations, shared-layout transitions, spring physics, and scroll-linked motion values

import { type AnimationOptions } from 'motion';
import { optimizedAppearDataAttribute } from 'motion-dom';
type AppearValueName = 'opacity' | 'transform';
type OptimizedAppearEntry = {
    name: AppearValueName;
    keyframes: [string | number, string | number];
    options: KeyframeAnimationOptions;
};
type AppearStoreEntry = {
    animation: Animation;
    startTime: number | null;
};
type SvelteMotionAppearStore = {
    animations: Map<string, AppearStoreEntry>;
    complete: Map<string, boolean>;
    started: Array<{
        id: string;
        name: string;
    }>;
    readyAnimation?: Animation;
    startFrameTime?: number;
};
declare global {
    interface Window {
        __SvelteMotionAppear?: SvelteMotionAppearStore;
    }
}
/**
 * Build serialisable optimized-appear animation entries from an initial and
 * animate pair.
 *
 * @param initial Initial keyframes reflected into SSR markup.
 * @param animate Target keyframes for the enter animation.
 * @param transition Motion transition options.
 * @returns Appear entries for WAAPI-supported opacity and transform values.
 *
 * @example
 * ```ts
 * const entries = createOptimizedAppearData(
 *     { opacity: 0, scale: 0.8 },
 *     { opacity: 1, scale: 1 },
 *     { duration: 0.6, ease: [0.16, 1, 0.3, 1] }
 * )
 * ```
 */
export declare const createOptimizedAppearData: (initial: Record<string, unknown> | null | undefined, animate: Record<string, unknown> | null | undefined, transition?: AnimationOptions) => OptimizedAppearEntry[];
/**
 * Create the inline SSR bootstrap that starts appear animations before Svelte
 * hydrates the component tree.
 *
 * @param appearId Stable optimized-appear id attached to the motion element.
 * @param entries WAAPI animation entries to start.
 * @returns A script tag string, or an empty string when no entries exist.
 *
 * @example
 * ```ts
 * const script = createOptimizedAppearScript('appear-1', [
 *     { name: 'opacity', keyframes: [0, 1], options: { duration: 300, fill: 'both' } }
 * ])
 * ```
 */
export declare const createOptimizedAppearScript: (appearId: string | undefined, entries: OptimizedAppearEntry[]) => string;
/**
 * Start an optimized appear animation imperatively.
 *
 * Mirrors Framer Motion's `startOptimizedAppearAnimation`: if Motion has
 * already mounted, this intentionally does nothing.
 *
 * @param element Element carrying `data-framer-appear-id`.
 * @param name CSS property to animate.
 * @param keyframes WAAPI keyframes for the property.
 * @param options Motion animation options.
 * @param onReady Optional callback receiving the started animation.
 * @returns Nothing.
 *
 * @example
 * ```ts
 * const element = document.querySelector('[data-framer-appear-id]')
 * if (element instanceof HTMLElement) {
 *     startOptimizedAppearAnimation(element, 'opacity', [0, 1], { duration: 0.3 })
 * }
 * ```
 */
export declare const startOptimizedAppearAnimation: (element: HTMLElement, name: AppearValueName, keyframes: string[] | number[], options: AnimationOptions, onReady?: (animation: Animation) => void) => void;
/**
 * Commit and cancel optimized appear animations for an element.
 *
 * @param elementId Optimized appear id.
 * @returns `true` when at least one optimized animation was handed off.
 *
 * @example
 * ```ts
 * const wasHandedOff = handoffOptimizedAppearAnimation('appear-1')
 * if (wasHandedOff) {
 *     console.log('Animation handed off to runtime')
 * }
 * ```
 */
export declare const handoffOptimizedAppearAnimation: (elementId: string | undefined) => boolean;
/**
 * Let active optimized appear animations finish before handing their final
 * styles back to Svelte Motion.
 *
 * @param elementId Optimized appear id.
 * @returns Whether at least one optimized animation was adopted.
 *
 * @example
 * ```ts
 * const wasAdopted = await finishOptimizedAppearAnimation('appear-1')
 * if (wasAdopted) {
 *     console.log('Animation finished and adopted')
 * }
 * ```
 */
export declare const finishOptimizedAppearAnimation: (elementId: string | undefined) => Promise<boolean>;
/**
 * Check whether an optimized appear animation is active for an element.
 *
 * @param elementId Optimized appear id.
 * @returns Whether any optimized appear animation is currently registered.
 *
 * @example
 * ```ts
 * if (hasOptimizedAppearAnimation('appear-1')) {
 *     console.log('Animation is active')
 * }
 * ```
 */
export declare const hasOptimizedAppearAnimation: (elementId: string | undefined) => boolean;
/**
 * Mark Motion as mounted so late optimized-appear starters no-op.
 *
 * @returns Nothing.
 *
 * @example
 * ```ts
 * markMotionMounted()
 * ```
 */
export declare const markMotionMounted: () => void;
export { optimizedAppearDataAttribute };