@humanspeak/svelte-motion
Version:
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
157 lines (156 loc) • 4.58 kB
TypeScript
import { type IProjectionNode, type ResolvedValues, type Transition, type VisualElement } from 'motion-dom';
type ProjectionVisualElement = VisualElement & {
latestValues: ResolvedValues;
projection?: IProjectionNode<HTMLElement>;
};
type LayoutOption = boolean | string | undefined;
export interface MotionDomProjectionOptions {
/** Parent adapter used to connect this node into the upstream projection tree. */
parent?: MotionDomProjectionAdapter | null;
}
/**
* Latest layout-related motion props applied to an upstream projection node.
*/
export interface MotionDomProjectionUpdateOptions {
/** Enables layout projection and selects the upstream animation type. */
layout?: LayoutOption;
/** Shared layout id used by upstream projection matching. */
layoutId?: string;
/** Tracks scroll on this element for descendant layout projection. */
layoutScroll?: boolean;
/** Transition passed to the upstream layout animation builder. */
transition?: Transition;
/** Inline style props passed through to the visual element. */
style?: unknown;
}
/**
* Svelte lifecycle adapter for motion-dom's upstream projection node system.
*
* The public Svelte API stays unchanged (`layout`, `layoutId`, `transition`).
* This adapter only translates those props into the same `HTMLProjectionNode`
* and `HTMLVisualElement` internals Framer Motion uses.
*/
export declare class MotionDomProjectionAdapter {
private static adapters;
readonly visualElement: ProjectionVisualElement;
readonly projection: IProjectionNode<HTMLElement>;
private element;
private layout;
private layoutId;
private transition;
private lastLayout;
constructor(options?: MotionDomProjectionOptions);
/**
* Update projection options from current Svelte props.
*
* @param options Current layout-related motion props.
* @returns Nothing.
*
* @example
* ```ts
* adapter.updateOptions({ layout, layoutId, transition, style })
* ```
*/
updateOptions(options: MotionDomProjectionUpdateOptions): void;
/**
* Mount the upstream projection node to an element and seed its layout.
*
* @param element Element represented by the current motion component.
* @returns Nothing.
*
* @example
* ```ts
* adapter.mount(element)
* ```
*/
mount(element: HTMLElement): void;
/**
* Unmount the upstream projection node and clear its visual-element store.
*
* @returns Nothing.
*
* @example
* ```ts
* adapter.unmount()
* ```
*/
unmount(): void;
/**
* Capture the upstream "before" snapshot.
*
* @returns Nothing.
*
* @example
* ```ts
* adapter.willUpdate()
* ```
*/
willUpdate(): void;
/**
* Commit an upstream layout update after Svelte has patched the DOM.
*
* @returns Nothing.
*
* @example
* ```ts
* adapter.didUpdate()
* ```
*/
didUpdate(): void;
/**
* Seed the current layout without animating.
*
* @returns Nothing.
*
* @example
* ```ts
* adapter.seedLayout()
* ```
*/
seedLayout(): void;
/**
* Animate from the last cached layout to the current observed layout.
*
* This covers layout changes discovered after the mutation by observers.
* Svelte runes mode doesn't expose the same component pre/post-update
* hooks Framer Motion uses in React, so this adapter reuses upstream
* projection while the Svelte component controls the snapshot timing.
*
* @returns Nothing.
*
* @example
* ```ts
* adapter.commitObservedLayoutChange()
* ```
*/
commitObservedLayoutChange(): void;
/**
* Finish any active upstream layout animation in this subtree.
*
* @returns Nothing.
*
* @example
* ```ts
* adapter.finishAnimation()
* ```
*/
finishAnimation(): void;
/**
* Check whether this projection subtree has an active layout animation.
*
* @returns `true` when this projection subtree is currently animating.
*
* @example
* ```ts
* if (adapter.isAnimating()) adapter.finishAnimation()
* ```
*/
isAnimating(): boolean;
private seedCachedSnapshotsForSubtree;
private prepareSnapshotPath;
private finishAnimationForSubtree;
private isAnimatingSubtree;
private updatePathScroll;
private refreshCachedLayout;
}
export {};