motion-v
Version:
<h1 align="center"> <img width="35" height="35" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" /><br />Motion for Vue</h1>
79 lines (78 loc) • 3.5 kB
TypeScript
import { DOMKeyframesDefinition, LegacyAnimationControls, MotionPath, MotionValue, ResolvedValues, TransformProperties, VariantLabels } from 'motion-dom';
import { animate } from 'framer-motion/dom';
import { LayoutOptions } from '../features/layout/types';
import { DragProps } from '../features/gestures/drag/types';
import { PressProps } from '../features/gestures/press/types';
import { HoverProps } from '../features/gestures/hover/types';
import { InViewProps } from '../features/gestures/in-view/types';
import { LayoutGroupState } from '../components/context';
import { PanProps } from '../features/gestures/pan/types';
import { MotionConfigState } from '../components/motion-config/types';
import { $Transition } from './framer-motion';
import { FocusProps } from '../features/gestures/focus/types';
import { AsTag } from './common';
type AnimationPlaybackControls = ReturnType<typeof animate>;
export interface VariantType extends DOMKeyframesDefinition {
transition?: Options['transition'];
attrX?: DOMKeyframesDefinition['x'];
attrY?: DOMKeyframesDefinition['y'];
attrScale?: DOMKeyframesDefinition['scale'];
}
interface BoundingBox {
top: number;
right: number;
bottom: number;
left: number;
}
export interface DragOptions {
constraints?: false | Partial<BoundingBox>;
dragSnapToOrigin?: boolean;
}
type TransformPropertiesWithoutTransition = Omit<TransformProperties, 'transition'>;
/**
* In motion-dom's `Transition` union, the `path` key carries two meanings:
* the curved-motion factory (`arc()`, typed `MotionPath`) and the SVG `path`
* attribute's per-value transition (typed `ValueTransition`, and non-optional
* in the mapped `SVGPathTransitions`). That collision can obscure the
* `MotionPath` type at call sites like `transition: { path: arc() }`.
*
* This distributive override pins `path` to `MotionPath` on every union member
* while preserving each member's other fields, so `arc()` is accepted cleanly.
*/
type WithMotionPath<T> = T extends any ? Omit<T, 'path'> & {
path?: MotionPath;
} : never;
export type MotionStyleProps = Partial<{
[K in keyof Omit<VariantType & TransformPropertiesWithoutTransition, 'attrX' | 'attrY' | 'attrScale'>]: string | number | undefined | MotionValue;
}>;
export interface Options<T = any> extends LayoutOptions, PressProps, HoverProps, InViewProps, DragProps, PanProps, FocusProps {
custom?: T;
as?: AsTag;
initial?: VariantLabels | VariantType | boolean;
animate?: VariantLabels | VariantType | LegacyAnimationControls;
exit?: VariantLabels | VariantType;
variants?: {
[k: string]: VariantType | ((custom: T) => VariantType);
};
inherit?: boolean;
style?: MotionStyleProps;
transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
transition?: WithMotionPath<$Transition> & {
layout?: WithMotionPath<$Transition>;
};
layoutGroup?: LayoutGroupState;
motionConfig?: MotionConfigState;
onAnimationComplete?: (definition: Options['animate']) => void;
onUpdate?: (latest: ResolvedValues) => void;
onAnimationStart?: (definition: Options['animate']) => void;
}
export interface MotionStateContext {
initial?: VariantLabels | boolean;
animate?: VariantLabels;
inView?: VariantLabels;
hover?: VariantLabels;
press?: VariantLabels;
exit?: VariantLabels;
}
export type AnimationFactory = () => AnimationPlaybackControls | undefined;
export {};