686 lines
24 KiB
TypeScript
686 lines
24 KiB
TypeScript
import * as motion_dom from 'motion-dom';
|
|
import { AnimationScope } from 'motion-dom';
|
|
|
|
type EasingFunction = (v: number) => number;
|
|
type BezierDefinition = readonly [number, number, number, number];
|
|
type EasingDefinition = BezierDefinition | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
|
|
/**
|
|
* The easing function to use. Set as one of:
|
|
*
|
|
* - The name of an in-built easing function.
|
|
* - An array of four numbers to define a cubic bezier curve.
|
|
* - An easing function, that accepts and returns a progress value between `0` and `1`.
|
|
*
|
|
* @public
|
|
*/
|
|
type Easing = EasingDefinition | EasingFunction;
|
|
|
|
/**
|
|
* An update function. It accepts a timestamp used to advance the animation.
|
|
*/
|
|
type Update = (timestamp: number) => void;
|
|
/**
|
|
* Drivers accept a update function and call it at an interval. This interval
|
|
* could be a synchronous loop, a setInterval, or tied to the device's framerate.
|
|
*/
|
|
interface DriverControls {
|
|
start: () => void;
|
|
stop: () => void;
|
|
now: () => number;
|
|
}
|
|
type Driver = (update: Update) => DriverControls;
|
|
|
|
interface SVGAttributes {
|
|
accentHeight?: number | string | undefined;
|
|
accumulate?: "none" | "sum" | undefined;
|
|
additive?: "replace" | "sum" | undefined;
|
|
alignmentBaseline?: "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit" | undefined;
|
|
allowReorder?: "no" | "yes" | undefined;
|
|
alphabetic?: number | string | undefined;
|
|
amplitude?: number | string | undefined;
|
|
arabicForm?: "initial" | "medial" | "terminal" | "isolated" | undefined;
|
|
ascent?: number | string | undefined;
|
|
attributeName?: string | undefined;
|
|
attributeType?: string | undefined;
|
|
autoReverse?: boolean | undefined;
|
|
azimuth?: number | string | undefined;
|
|
baseFrequency?: number | string | undefined;
|
|
baselineShift?: number | string | undefined;
|
|
baseProfile?: number | string | undefined;
|
|
bbox?: number | string | undefined;
|
|
begin?: number | string | undefined;
|
|
bias?: number | string | undefined;
|
|
by?: number | string | undefined;
|
|
calcMode?: number | string | undefined;
|
|
capHeight?: number | string | undefined;
|
|
clip?: number | string | undefined;
|
|
clipPath?: string | undefined;
|
|
clipPathUnits?: number | string | undefined;
|
|
clipRule?: number | string | undefined;
|
|
colorInterpolation?: number | string | undefined;
|
|
colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit" | undefined;
|
|
colorProfile?: number | string | undefined;
|
|
colorRendering?: number | string | undefined;
|
|
contentScriptType?: number | string | undefined;
|
|
contentStyleType?: number | string | undefined;
|
|
cursor?: number | string | undefined;
|
|
cx?: number | string | undefined;
|
|
cy?: number | string | undefined;
|
|
d?: string | undefined;
|
|
decelerate?: number | string | undefined;
|
|
descent?: number | string | undefined;
|
|
diffuseConstant?: number | string | undefined;
|
|
direction?: number | string | undefined;
|
|
display?: number | string | undefined;
|
|
divisor?: number | string | undefined;
|
|
dominantBaseline?: number | string | undefined;
|
|
dur?: number | string | undefined;
|
|
dx?: number | string | undefined;
|
|
dy?: number | string | undefined;
|
|
edgeMode?: number | string | undefined;
|
|
elevation?: number | string | undefined;
|
|
enableBackground?: number | string | undefined;
|
|
end?: number | string | undefined;
|
|
exponent?: number | string | undefined;
|
|
externalResourcesRequired?: boolean | undefined;
|
|
fill?: string | undefined;
|
|
fillOpacity?: number | string | undefined;
|
|
fillRule?: "nonzero" | "evenodd" | "inherit" | undefined;
|
|
filter?: string | undefined;
|
|
filterRes?: number | string | undefined;
|
|
filterUnits?: number | string | undefined;
|
|
floodColor?: number | string | undefined;
|
|
floodOpacity?: number | string | undefined;
|
|
focusable?: boolean | "auto" | undefined;
|
|
fontFamily?: string | undefined;
|
|
fontSize?: number | string | undefined;
|
|
fontSizeAdjust?: number | string | undefined;
|
|
fontStretch?: number | string | undefined;
|
|
fontStyle?: number | string | undefined;
|
|
fontVariant?: number | string | undefined;
|
|
fontWeight?: number | string | undefined;
|
|
format?: number | string | undefined;
|
|
fr?: number | string | undefined;
|
|
from?: number | string | undefined;
|
|
fx?: number | string | undefined;
|
|
fy?: number | string | undefined;
|
|
g1?: number | string | undefined;
|
|
g2?: number | string | undefined;
|
|
glyphName?: number | string | undefined;
|
|
glyphOrientationHorizontal?: number | string | undefined;
|
|
glyphOrientationVertical?: number | string | undefined;
|
|
glyphRef?: number | string | undefined;
|
|
gradientTransform?: string | undefined;
|
|
gradientUnits?: string | undefined;
|
|
hanging?: number | string | undefined;
|
|
horizAdvX?: number | string | undefined;
|
|
horizOriginX?: number | string | undefined;
|
|
href?: string | undefined;
|
|
ideographic?: number | string | undefined;
|
|
imageRendering?: number | string | undefined;
|
|
in2?: number | string | undefined;
|
|
in?: string | undefined;
|
|
intercept?: number | string | undefined;
|
|
k1?: number | string | undefined;
|
|
k2?: number | string | undefined;
|
|
k3?: number | string | undefined;
|
|
k4?: number | string | undefined;
|
|
k?: number | string | undefined;
|
|
kernelMatrix?: number | string | undefined;
|
|
kernelUnitLength?: number | string | undefined;
|
|
kerning?: number | string | undefined;
|
|
keyPoints?: number | string | undefined;
|
|
keySplines?: number | string | undefined;
|
|
keyTimes?: number | string | undefined;
|
|
lengthAdjust?: number | string | undefined;
|
|
letterSpacing?: number | string | undefined;
|
|
lightingColor?: number | string | undefined;
|
|
limitingConeAngle?: number | string | undefined;
|
|
local?: number | string | undefined;
|
|
markerEnd?: string | undefined;
|
|
markerHeight?: number | string | undefined;
|
|
markerMid?: string | undefined;
|
|
markerStart?: string | undefined;
|
|
markerUnits?: number | string | undefined;
|
|
markerWidth?: number | string | undefined;
|
|
mask?: string | undefined;
|
|
maskContentUnits?: number | string | undefined;
|
|
maskUnits?: number | string | undefined;
|
|
mathematical?: number | string | undefined;
|
|
mode?: number | string | undefined;
|
|
numOctaves?: number | string | undefined;
|
|
offset?: number | string | undefined;
|
|
opacity?: number | string | undefined;
|
|
operator?: number | string | undefined;
|
|
order?: number | string | undefined;
|
|
orient?: number | string | undefined;
|
|
orientation?: number | string | undefined;
|
|
origin?: number | string | undefined;
|
|
overflow?: number | string | undefined;
|
|
overlinePosition?: number | string | undefined;
|
|
overlineThickness?: number | string | undefined;
|
|
paintOrder?: number | string | undefined;
|
|
panose1?: number | string | undefined;
|
|
path?: string | undefined;
|
|
pathLength?: number | string | undefined;
|
|
patternContentUnits?: string | undefined;
|
|
patternTransform?: number | string | undefined;
|
|
patternUnits?: string | undefined;
|
|
pointerEvents?: number | string | undefined;
|
|
points?: string | undefined;
|
|
pointsAtX?: number | string | undefined;
|
|
pointsAtY?: number | string | undefined;
|
|
pointsAtZ?: number | string | undefined;
|
|
preserveAlpha?: boolean | undefined;
|
|
preserveAspectRatio?: string | undefined;
|
|
primitiveUnits?: number | string | undefined;
|
|
r?: number | string | undefined;
|
|
radius?: number | string | undefined;
|
|
refX?: number | string | undefined;
|
|
refY?: number | string | undefined;
|
|
renderingIntent?: number | string | undefined;
|
|
repeatCount?: number | string | undefined;
|
|
repeatDur?: number | string | undefined;
|
|
requiredExtensions?: number | string | undefined;
|
|
requiredFeatures?: number | string | undefined;
|
|
restart?: number | string | undefined;
|
|
result?: string | undefined;
|
|
rotate?: number | string | undefined;
|
|
rx?: number | string | undefined;
|
|
ry?: number | string | undefined;
|
|
scale?: number | string | undefined;
|
|
seed?: number | string | undefined;
|
|
shapeRendering?: number | string | undefined;
|
|
slope?: number | string | undefined;
|
|
spacing?: number | string | undefined;
|
|
specularConstant?: number | string | undefined;
|
|
specularExponent?: number | string | undefined;
|
|
speed?: number | string | undefined;
|
|
spreadMethod?: string | undefined;
|
|
startOffset?: number | string | undefined;
|
|
stdDeviation?: number | string | undefined;
|
|
stemh?: number | string | undefined;
|
|
stemv?: number | string | undefined;
|
|
stitchTiles?: number | string | undefined;
|
|
stopColor?: string | undefined;
|
|
stopOpacity?: number | string | undefined;
|
|
strikethroughPosition?: number | string | undefined;
|
|
strikethroughThickness?: number | string | undefined;
|
|
string?: number | string | undefined;
|
|
stroke?: string | undefined;
|
|
strokeDasharray?: string | number | undefined;
|
|
strokeDashoffset?: string | number | undefined;
|
|
strokeLinecap?: "butt" | "round" | "square" | "inherit" | undefined;
|
|
strokeLinejoin?: "miter" | "round" | "bevel" | "inherit" | undefined;
|
|
strokeMiterlimit?: number | string | undefined;
|
|
strokeOpacity?: number | string | undefined;
|
|
strokeWidth?: number | string | undefined;
|
|
surfaceScale?: number | string | undefined;
|
|
systemLanguage?: number | string | undefined;
|
|
tableValues?: number | string | undefined;
|
|
targetX?: number | string | undefined;
|
|
targetY?: number | string | undefined;
|
|
textAnchor?: string | undefined;
|
|
textDecoration?: number | string | undefined;
|
|
textLength?: number | string | undefined;
|
|
textRendering?: number | string | undefined;
|
|
to?: number | string | undefined;
|
|
transform?: string | undefined;
|
|
u1?: number | string | undefined;
|
|
u2?: number | string | undefined;
|
|
underlinePosition?: number | string | undefined;
|
|
underlineThickness?: number | string | undefined;
|
|
unicode?: number | string | undefined;
|
|
unicodeBidi?: number | string | undefined;
|
|
unicodeRange?: number | string | undefined;
|
|
unitsPerEm?: number | string | undefined;
|
|
vAlphabetic?: number | string | undefined;
|
|
values?: string | undefined;
|
|
vectorEffect?: number | string | undefined;
|
|
version?: string | undefined;
|
|
vertAdvY?: number | string | undefined;
|
|
vertOriginX?: number | string | undefined;
|
|
vertOriginY?: number | string | undefined;
|
|
vHanging?: number | string | undefined;
|
|
vIdeographic?: number | string | undefined;
|
|
viewBox?: string | undefined;
|
|
viewTarget?: number | string | undefined;
|
|
visibility?: number | string | undefined;
|
|
vMathematical?: number | string | undefined;
|
|
widths?: number | string | undefined;
|
|
wordSpacing?: number | string | undefined;
|
|
writingMode?: number | string | undefined;
|
|
x1?: number | string | undefined;
|
|
x2?: number | string | undefined;
|
|
x?: number | string | undefined;
|
|
xChannelSelector?: string | undefined;
|
|
xHeight?: number | string | undefined;
|
|
xlinkActuate?: string | undefined;
|
|
xlinkArcrole?: string | undefined;
|
|
xlinkHref?: string | undefined;
|
|
xlinkRole?: string | undefined;
|
|
xlinkShow?: string | undefined;
|
|
xlinkTitle?: string | undefined;
|
|
xlinkType?: string | undefined;
|
|
xmlBase?: string | undefined;
|
|
xmlLang?: string | undefined;
|
|
xmlns?: string | undefined;
|
|
xmlnsXlink?: string | undefined;
|
|
xmlSpace?: string | undefined;
|
|
y1?: number | string | undefined;
|
|
y2?: number | string | undefined;
|
|
y?: number | string | undefined;
|
|
yChannelSelector?: string | undefined;
|
|
z?: number | string | undefined;
|
|
zoomAndPan?: string | undefined;
|
|
}
|
|
|
|
interface ProgressTimeline {
|
|
currentTime: null | {
|
|
value: number;
|
|
};
|
|
cancel?: VoidFunction;
|
|
}
|
|
|
|
interface AnimationState<V> {
|
|
value: V;
|
|
done: boolean;
|
|
}
|
|
interface KeyframeGenerator<V> {
|
|
calculatedDuration: null | number;
|
|
next: (t: number) => AnimationState<V>;
|
|
toString: () => string;
|
|
}
|
|
|
|
interface AnimationPlaybackLifecycles<V> {
|
|
onUpdate?: (latest: V) => void;
|
|
onPlay?: () => void;
|
|
onComplete?: () => void;
|
|
onRepeat?: () => void;
|
|
onStop?: () => void;
|
|
}
|
|
type GeneratorFactory = (options: ValueAnimationOptions<any>) => KeyframeGenerator<any>;
|
|
type AnimationGeneratorType = GeneratorFactory | "decay" | "spring" | "keyframes" | "tween" | "inertia";
|
|
interface Transition extends AnimationPlaybackOptions, Omit<SpringOptions, "keyframes">, Omit<InertiaOptions, "keyframes">, KeyframeOptions {
|
|
delay?: number;
|
|
elapsed?: number;
|
|
driver?: Driver;
|
|
type?: AnimationGeneratorType;
|
|
duration?: number;
|
|
autoplay?: boolean;
|
|
startTime?: number;
|
|
}
|
|
interface ValueAnimationTransition<V = any> extends Transition, AnimationPlaybackLifecycles<V> {
|
|
}
|
|
interface ValueAnimationOptions<V extends string | number = number> extends ValueAnimationTransition {
|
|
keyframes: V[];
|
|
name?: string;
|
|
from?: V;
|
|
isGenerator?: boolean;
|
|
}
|
|
type StyleTransitions = {
|
|
[K in keyof CSSStyleDeclarationWithTransform]?: Transition;
|
|
};
|
|
type SVGPathTransitions = {
|
|
[K in keyof SVGPathProperties]: Transition;
|
|
};
|
|
type SVGTransitions = {
|
|
[K in keyof SVGAttributes]: Transition;
|
|
};
|
|
type VariableTransitions = {
|
|
[key: `--${string}`]: Transition;
|
|
};
|
|
type AnimationOptionsWithValueOverrides<V = any> = StyleTransitions & SVGPathTransitions & SVGTransitions & VariableTransitions & ValueAnimationTransition<V>;
|
|
interface DynamicAnimationOptions extends Omit<AnimationOptionsWithValueOverrides, "delay"> {
|
|
delay?: number | DynamicOption<number>;
|
|
}
|
|
/**
|
|
* @public
|
|
*/
|
|
interface AnimationPlaybackControls {
|
|
time: number;
|
|
speed: number;
|
|
startTime: number | null;
|
|
state?: AnimationPlayState;
|
|
duration: number;
|
|
stop: () => void;
|
|
play: () => void;
|
|
pause: () => void;
|
|
complete: () => void;
|
|
cancel: () => void;
|
|
then: (onResolve: VoidFunction, onReject?: VoidFunction) => Promise<void>;
|
|
attachTimeline?: (timeline: ProgressTimeline, fallback?: (animation: AnimationPlaybackControls) => VoidFunction) => VoidFunction;
|
|
flatten: () => void;
|
|
}
|
|
type DynamicOption<T> = (i: number, total: number) => T;
|
|
interface CSSStyleDeclarationWithTransform extends Omit<CSSStyleDeclaration, "direction" | "transition" | "x" | "y" | "z"> {
|
|
x: number | string;
|
|
y: number | string;
|
|
z: number | string;
|
|
rotateX: number | string;
|
|
rotateY: number | string;
|
|
rotateZ: number | string;
|
|
scaleX: number;
|
|
scaleY: number;
|
|
scaleZ: number;
|
|
skewX: number | string;
|
|
skewY: number | string;
|
|
}
|
|
type ValueKeyframe = string | number;
|
|
type UnresolvedValueKeyframe = ValueKeyframe | null;
|
|
type ValueKeyframesDefinition = ValueKeyframe | ValueKeyframe[] | UnresolvedValueKeyframe[];
|
|
type StyleKeyframesDefinition = {
|
|
[K in keyof CSSStyleDeclarationWithTransform]?: ValueKeyframesDefinition;
|
|
};
|
|
type SVGKeyframesDefinition = {
|
|
[K in keyof SVGAttributes]?: ValueKeyframesDefinition;
|
|
};
|
|
type VariableKeyframesDefinition = {
|
|
[key: `--${string}`]: ValueKeyframesDefinition;
|
|
};
|
|
type SVGPathKeyframesDefinition = {
|
|
[K in keyof SVGPathProperties]?: ValueKeyframesDefinition;
|
|
};
|
|
type DOMKeyframesDefinition = StyleKeyframesDefinition & SVGKeyframesDefinition & SVGPathKeyframesDefinition & VariableKeyframesDefinition;
|
|
interface VelocityOptions {
|
|
velocity?: number;
|
|
restSpeed?: number;
|
|
restDelta?: number;
|
|
}
|
|
type RepeatType = "loop" | "reverse" | "mirror";
|
|
interface AnimationPlaybackOptions {
|
|
repeat?: number;
|
|
repeatType?: RepeatType;
|
|
repeatDelay?: number;
|
|
}
|
|
interface DurationSpringOptions {
|
|
duration?: number;
|
|
visualDuration?: number;
|
|
bounce?: number;
|
|
}
|
|
interface SpringOptions extends DurationSpringOptions, VelocityOptions {
|
|
stiffness?: number;
|
|
damping?: number;
|
|
mass?: number;
|
|
}
|
|
interface DecayOptions extends VelocityOptions {
|
|
keyframes?: number[];
|
|
power?: number;
|
|
timeConstant?: number;
|
|
modifyTarget?: (v: number) => number;
|
|
}
|
|
interface InertiaOptions extends DecayOptions {
|
|
bounceStiffness?: number;
|
|
bounceDamping?: number;
|
|
min?: number;
|
|
max?: number;
|
|
}
|
|
interface KeyframeOptions {
|
|
ease?: Easing | Easing[];
|
|
times?: number[];
|
|
}
|
|
|
|
/**
|
|
* @public
|
|
*/
|
|
type Subscriber<T> = (v: T) => void;
|
|
interface MotionValueEventCallbacks<V> {
|
|
animationStart: () => void;
|
|
animationComplete: () => void;
|
|
animationCancel: () => void;
|
|
change: (latestValue: V) => void;
|
|
renderRequest: () => void;
|
|
}
|
|
interface ResolvedValues {
|
|
[key: string]: string | number;
|
|
}
|
|
interface Owner {
|
|
current: HTMLElement | unknown;
|
|
getProps: () => {
|
|
onUpdate?: (latest: ResolvedValues) => void;
|
|
};
|
|
}
|
|
/**
|
|
* `MotionValue` is used to track the state and velocity of motion values.
|
|
*
|
|
* @public
|
|
*/
|
|
declare class MotionValue<V = any> {
|
|
/**
|
|
* This will be replaced by the build step with the latest version number.
|
|
* When MotionValues are provided to motion components, warn if versions are mixed.
|
|
*/
|
|
version: string;
|
|
/**
|
|
* If a MotionValue has an owner, it was created internally within Motion
|
|
* and therefore has no external listeners. It is therefore safe to animate via WAAPI.
|
|
*/
|
|
owner?: Owner;
|
|
/**
|
|
* The current state of the `MotionValue`.
|
|
*/
|
|
private current;
|
|
/**
|
|
* The previous state of the `MotionValue`.
|
|
*/
|
|
private prev;
|
|
/**
|
|
* The previous state of the `MotionValue` at the end of the previous frame.
|
|
*/
|
|
private prevFrameValue;
|
|
/**
|
|
* The last time the `MotionValue` was updated.
|
|
*/
|
|
private updatedAt;
|
|
/**
|
|
* The time `prevFrameValue` was updated.
|
|
*/
|
|
private prevUpdatedAt;
|
|
private stopPassiveEffect?;
|
|
/**
|
|
* A reference to the currently-controlling animation.
|
|
*/
|
|
animation?: AnimationPlaybackControls;
|
|
setCurrent(current: V): void;
|
|
setPrevFrameValue(prevFrameValue?: V | undefined): void;
|
|
/**
|
|
* Adds a function that will be notified when the `MotionValue` is updated.
|
|
*
|
|
* It returns a function that, when called, will cancel the subscription.
|
|
*
|
|
* When calling `onChange` inside a React component, it should be wrapped with the
|
|
* `useEffect` hook. As it returns an unsubscribe function, this should be returned
|
|
* from the `useEffect` function to ensure you don't add duplicate subscribers..
|
|
*
|
|
* ```jsx
|
|
* export const MyComponent = () => {
|
|
* const x = useMotionValue(0)
|
|
* const y = useMotionValue(0)
|
|
* const opacity = useMotionValue(1)
|
|
*
|
|
* useEffect(() => {
|
|
* function updateOpacity() {
|
|
* const maxXY = Math.max(x.get(), y.get())
|
|
* const newOpacity = transform(maxXY, [0, 100], [1, 0])
|
|
* opacity.set(newOpacity)
|
|
* }
|
|
*
|
|
* const unsubscribeX = x.on("change", updateOpacity)
|
|
* const unsubscribeY = y.on("change", updateOpacity)
|
|
*
|
|
* return () => {
|
|
* unsubscribeX()
|
|
* unsubscribeY()
|
|
* }
|
|
* }, [])
|
|
*
|
|
* return <motion.div style={{ x }} />
|
|
* }
|
|
* ```
|
|
*
|
|
* @param subscriber - A function that receives the latest value.
|
|
* @returns A function that, when called, will cancel this subscription.
|
|
*
|
|
* @deprecated
|
|
*/
|
|
onChange(subscription: Subscriber<V>): () => void;
|
|
/**
|
|
* An object containing a SubscriptionManager for each active event.
|
|
*/
|
|
private events;
|
|
on<EventName extends keyof MotionValueEventCallbacks<V>>(eventName: EventName, callback: MotionValueEventCallbacks<V>[EventName]): VoidFunction;
|
|
clearListeners(): void;
|
|
/**
|
|
* Sets the state of the `MotionValue`.
|
|
*
|
|
* @remarks
|
|
*
|
|
* ```jsx
|
|
* const x = useMotionValue(0)
|
|
* x.set(10)
|
|
* ```
|
|
*
|
|
* @param latest - Latest value to set.
|
|
* @param render - Whether to notify render subscribers. Defaults to `true`
|
|
*
|
|
* @public
|
|
*/
|
|
set(v: V, render?: boolean): void;
|
|
setWithVelocity(prev: V, current: V, delta: number): void;
|
|
/**
|
|
* Set the state of the `MotionValue`, stopping any active animations,
|
|
* effects, and resets velocity to `0`.
|
|
*/
|
|
jump(v: V, endAnimation?: boolean): void;
|
|
updateAndNotify: (v: V, render?: boolean) => void;
|
|
/**
|
|
* Returns the latest state of `MotionValue`
|
|
*
|
|
* @returns - The latest state of `MotionValue`
|
|
*
|
|
* @public
|
|
*/
|
|
get(): NonNullable<V>;
|
|
/**
|
|
* @public
|
|
*/
|
|
getPrevious(): V | undefined;
|
|
/**
|
|
* Returns the latest velocity of `MotionValue`
|
|
*
|
|
* @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
|
|
*
|
|
* @public
|
|
*/
|
|
getVelocity(): number;
|
|
hasAnimated: boolean;
|
|
/**
|
|
* Stop the currently active animation.
|
|
*
|
|
* @public
|
|
*/
|
|
stop(): void;
|
|
/**
|
|
* Returns `true` if this value is currently animating.
|
|
*
|
|
* @public
|
|
*/
|
|
isAnimating(): boolean;
|
|
private clearAnimation;
|
|
/**
|
|
* Destroy and clean up subscribers to this `MotionValue`.
|
|
*
|
|
* The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
|
|
* handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
|
|
* created a `MotionValue` via the `motionValue` function.
|
|
*
|
|
* @public
|
|
*/
|
|
destroy(): void;
|
|
}
|
|
|
|
/**
|
|
* @public
|
|
*/
|
|
interface SVGPathProperties {
|
|
pathLength?: number;
|
|
pathOffset?: number;
|
|
pathSpacing?: number;
|
|
}
|
|
|
|
interface ScrollOptions {
|
|
source?: HTMLElement;
|
|
container?: HTMLElement;
|
|
target?: Element;
|
|
axis?: "x" | "y";
|
|
offset?: ScrollOffset;
|
|
}
|
|
type SupportedEdgeUnit = "px" | "vw" | "vh" | "%";
|
|
type EdgeUnit = `${number}${SupportedEdgeUnit}`;
|
|
type NamedEdges = "start" | "end" | "center";
|
|
type EdgeString = NamedEdges | EdgeUnit | `${number}`;
|
|
type Edge = EdgeString | number;
|
|
type ProgressIntersection = [number, number];
|
|
type Intersection = `${Edge} ${Edge}`;
|
|
type ScrollOffset = Array<Edge | Intersection | ProgressIntersection>;
|
|
|
|
declare class ScrollTimeline implements ProgressTimeline {
|
|
constructor(options: ScrollOptions);
|
|
currentTime: null | {
|
|
value: number;
|
|
};
|
|
cancel?: VoidFunction;
|
|
}
|
|
declare global {
|
|
interface Window {
|
|
ScrollTimeline: ScrollTimeline;
|
|
}
|
|
}
|
|
|
|
type Process = (data: FrameData) => void;
|
|
type Schedule = (process: Process, keepAlive?: boolean, immediate?: boolean) => Process;
|
|
type StepId = "read" | "resolveKeyframes" | "update" | "preRender" | "render" | "postRender";
|
|
type Batcher = {
|
|
[key in StepId]: Schedule;
|
|
};
|
|
interface FrameData {
|
|
delta: number;
|
|
timestamp: number;
|
|
isProcessing: boolean;
|
|
}
|
|
|
|
declare const optimizedAppearDataAttribute: "data-framer-appear-id";
|
|
|
|
/**
|
|
* Expose only the needed part of the VisualElement interface to
|
|
* ensure React types don't end up in the generic DOM bundle.
|
|
*/
|
|
interface WithAppearProps {
|
|
props: {
|
|
[optimizedAppearDataAttribute]?: string;
|
|
values?: {
|
|
[key: string]: MotionValue<number> | MotionValue<string>;
|
|
};
|
|
};
|
|
}
|
|
type HandoffFunction = (storeId: string, valueName: string, frame: Batcher) => number | null;
|
|
/**
|
|
* The window global object acts as a bridge between our inline script
|
|
* triggering the optimized appear animations, and Motion.
|
|
*/
|
|
declare global {
|
|
interface Window {
|
|
MotionHandoffAnimation?: HandoffFunction;
|
|
MotionHandoffMarkAsComplete?: (elementId: string) => void;
|
|
MotionHandoffIsComplete?: (elementId: string) => boolean;
|
|
MotionHasOptimisedAnimation?: (elementId?: string, valueName?: string) => boolean;
|
|
MotionCancelOptimisedAnimation?: (elementId?: string, valueName?: string, frame?: Batcher, canResume?: boolean) => void;
|
|
MotionCheckAppearSync?: (visualElement: WithAppearProps, valueName: string, value: MotionValue) => VoidFunction | void;
|
|
MotionIsMounted?: boolean;
|
|
}
|
|
}
|
|
|
|
declare function useAnimateMini<T extends Element = any>(): [AnimationScope<T>, (elementOrSelector: motion_dom.ElementOrSelector, keyframes: DOMKeyframesDefinition, options?: DynamicAnimationOptions | undefined) => AnimationPlaybackControls];
|
|
|
|
export { useAnimateMini as useAnimate };
|