, "children"> & {
children?: "children" extends keyof P ? P["children"] | MotionComponentProps["children"] : MotionComponentProps
["children"];
}>;
interface MotionComponentOptions {
forwardMotionProps?: boolean;
}
/**
* Create a `motion` component.
*
* This function accepts a Component argument, which can be either a string (ie "div"
* for `motion.div`), or an actual React component.
*
* Alongside this is a config option which provides a way of rendering the provided
* component "offline", or outside the React render cycle.
*/
declare function createMotionComponent(Component: TagName | string | React$1.ComponentType, { forwardMotionProps }?: MotionComponentOptions, preloadedFeatures?: FeaturePackages, createVisualElement?: CreateVisualElement): MotionComponent;
declare const m: typeof createMotionComponent & HTMLMotionComponents & SVGMotionComponents & {
create: typeof createMotionComponent;
};
declare const motion: typeof createMotionComponent & HTMLMotionComponents & SVGMotionComponents & {
create: typeof createMotionComponent;
};
type EventListenerWithPointInfo = (e: PointerEvent, info: EventInfo) => void;
declare const addPointerInfo: (handler: EventListenerWithPointInfo) => EventListener;
declare function addPointerEvent(target: EventTarget, eventName: string, handler: EventListenerWithPointInfo, options?: AddEventListenerOptions): () => void;
declare const animations: FeaturePackages;
declare function calcLength(axis: Axis): number;
declare const createBox: () => Box;
declare const isBrowser: boolean;
/**
* Taken from https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/compose-refs.tsx
*/
type PossibleRef = React$1.Ref | undefined;
/**
* A custom hook that composes multiple refs
* Accepts callback refs and RefObject(s)
*/
declare function useComposedRefs(...refs: PossibleRef[]): React$1.RefCallback;
declare function useForceUpdate(): [VoidFunction, number];
declare const useIsomorphicLayoutEffect: typeof useEffect;
declare function useUnmountEffect(callback: () => void): void;
/**
* @public
*/
declare const domAnimation: FeatureBundle;
/**
* @public
*/
declare const domMax: FeatureBundle;
/**
* @public
*/
declare const domMin: FeatureBundle;
declare function useMotionValueEvent>(value: MotionValue, event: EventName, callback: MotionValueEventCallbacks[EventName]): void;
/**
* @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
*/
declare function useElementScroll(ref: RefObject): {
scrollX: motion_dom.MotionValue;
scrollY: motion_dom.MotionValue;
scrollXProgress: motion_dom.MotionValue;
scrollYProgress: motion_dom.MotionValue;
};
/**
* @deprecated useViewportScroll is deprecated. Convert to useScroll()
*/
declare function useViewportScroll(): {
scrollX: motion_dom.MotionValue;
scrollY: motion_dom.MotionValue;
scrollXProgress: motion_dom.MotionValue;
scrollYProgress: motion_dom.MotionValue;
};
/**
* Combine multiple motion values into a new one using a string template literal.
*
* ```jsx
* import {
* motion,
* useSpring,
* useMotionValue,
* useMotionTemplate
* } from "framer-motion"
*
* function Component() {
* const shadowX = useSpring(0)
* const shadowY = useMotionValue(0)
* const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`
*
* return
* }
* ```
*
* @public
*/
declare function useMotionTemplate(fragments: TemplateStringsArray, ...values: Array): MotionValue;
/**
* Creates a `MotionValue` to track the state and velocity of a value.
*
* Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
*
* ```jsx
* export const MyComponent = () => {
* const scale = useMotionValue(1)
*
* return
* }
* ```
*
* @param initial - The initial state.
*
* @public
*/
declare function useMotionValue(initial: T): MotionValue;
interface UseScrollOptions extends Omit {
container?: RefObject;
target?: RefObject;
}
declare function useScroll({ container, target, ...options }?: UseScrollOptions): {
scrollX: motion_dom.MotionValue;
scrollY: motion_dom.MotionValue;
scrollXProgress: motion_dom.MotionValue;
scrollYProgress: motion_dom.MotionValue;
};
/**
* Creates a `MotionValue` that, when `set`, will use a spring animation to animate to its new state.
*
* It can either work as a stand-alone `MotionValue` by initialising it with a value, or as a subscriber
* to another `MotionValue`.
*
* @remarks
*
* ```jsx
* const x = useSpring(0, { stiffness: 300 })
* const y = useSpring(x, { damping: 10 })
* ```
*
* @param inputValue - `MotionValue` or number. If provided a `MotionValue`, when the input `MotionValue` changes, the created `MotionValue` will spring towards that value.
* @param springConfig - Configuration options for the spring.
* @returns `MotionValue`
*
* @public
*/
declare function useSpring(source: MotionValue, options?: SpringOptions): MotionValue;
declare function useSpring(source: string, options?: SpringOptions): MotionValue;
declare function useSpring(source: MotionValue, options?: SpringOptions): MotionValue;
declare function useSpring(source: number, options?: SpringOptions): MotionValue;
declare function useTime(): motion_dom.MotionValue;
type InputRange = number[];
type SingleTransformer = (input: I) => O;
type MultiTransformer = (input: I[]) => O;
/**
* Create a `MotionValue` that transforms the output of another `MotionValue` by mapping it from one range of values into another.
*
* @remarks
*
* Given an input range of `[-200, -100, 100, 200]` and an output range of
* `[0, 1, 1, 0]`, the returned `MotionValue` will:
*
* - When provided a value between `-200` and `-100`, will return a value between `0` and `1`.
* - When provided a value between `-100` and `100`, will return `1`.
* - When provided a value between `100` and `200`, will return a value between `1` and `0`
*
*
* The input range must be a linear series of numbers. The output range
* can be any value type supported by Motion: numbers, colors, shadows, etc.
*
* Every value in the output range must be of the same type and in the same format.
*
* ```jsx
* export const MyComponent = () => {
* const x = useMotionValue(0)
* const xRange = [-200, -100, 100, 200]
* const opacityRange = [0, 1, 1, 0]
* const opacity = useTransform(x, xRange, opacityRange)
*
* return (
*
* )
* }
* ```
*
* @param inputValue - `MotionValue`
* @param inputRange - A linear series of numbers (either all increasing or decreasing)
* @param outputRange - A series of numbers, colors or strings. Must be the same length as `inputRange`.
* @param options -
*
* - clamp: boolean. Clamp values to within the given range. Defaults to `true`
* - ease: EasingFunction[]. Easing functions to use on the interpolations between each value in the input and output ranges. If provided as an array, the array must be one item shorter than the input and output ranges, as the easings apply to the transition between each.
*
* @returns `MotionValue`
*
* @public
*/
declare function useTransform(value: MotionValue, inputRange: InputRange, outputRange: O[], options?: TransformOptions): MotionValue;
/**
* Create a `MotionValue` that transforms the output of another `MotionValue` through a function.
* In this example, `y` will always be double `x`.
*
* ```jsx
* export const MyComponent = () => {
* const x = useMotionValue(10)
* const y = useTransform(x, value => value * 2)
*
* return
* }
* ```
*
* @param input - A `MotionValue` that will pass its latest value through `transform` to update the returned `MotionValue`.
* @param transform - A function that accepts the latest value from `input` and returns a new value.
* @returns `MotionValue`
*
* @public
*/
declare function useTransform(input: MotionValue, transformer: SingleTransformer): MotionValue;
/**
* Pass an array of `MotionValue`s and a function to combine them. In this example, `z` will be the `x` multiplied by `y`.
*
* ```jsx
* export const MyComponent = () => {
* const x = useMotionValue(0)
* const y = useMotionValue(0)
* const z = useTransform([x, y], ([latestX, latestY]) => latestX * latestY)
*
* return
* }
* ```
*
* @param input - An array of `MotionValue`s that will pass their latest values through `transform` to update the returned `MotionValue`.
* @param transform - A function that accepts the latest values from `input` and returns a new value.
* @returns `MotionValue`
*
* @public
*/
declare function useTransform(input: MotionValue[] | MotionValue[] | MotionValue[], transformer: MultiTransformer): MotionValue;
declare function useTransform(transformer: () => O): MotionValue;
/**
* Creates a `MotionValue` that updates when the velocity of the provided `MotionValue` changes.
*
* ```javascript
* const x = useMotionValue(0)
* const xVelocity = useVelocity(x)
* const xAcceleration = useVelocity(xVelocity)
* ```
*
* @public
*/
declare function useVelocity(value: MotionValue): MotionValue;
interface WillChange extends MotionValue {
add(name: string): void;
}
declare function useWillChange(): WillChange;
declare class WillChangeMotionValue extends MotionValue implements WillChange {
private isEnabled;
add(name: string): void;
private update;
}
/**
* If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
*
* TODO: Remove and move to library
*/
declare function resolveMotionValue(value?: AnyResolvedKeyframe | MotionValue): AnyResolvedKeyframe;
/**
* A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
*
* This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
* `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
*
* It will actively respond to changes and re-render your components with the latest setting.
*
* ```jsx
* export function Sidebar({ isOpen }) {
* const shouldReduceMotion = useReducedMotion()
* const closedX = shouldReduceMotion ? 0 : "-100%"
*
* return (
*
* )
* }
* ```
*
* @return boolean
*
* @public
*/
declare function useReducedMotion(): boolean | null;
declare function useReducedMotionConfig(): boolean | null;
/**
* @public
*/
declare function animationControls(): LegacyAnimationControls;
declare function useAnimate(): [AnimationScope, {
(sequence: AnimationSequence, options?: SequenceOptions | undefined): motion_dom.AnimationPlaybackControlsWithThen;
(value: string | motion_dom.MotionValue, keyframes: string | motion_dom.UnresolvedValueKeyframe[], options?: motion_dom.ValueAnimationTransition | undefined): motion_dom.AnimationPlaybackControlsWithThen;
(value: number | motion_dom.MotionValue, keyframes: number | motion_dom.UnresolvedValueKeyframe[], options?: motion_dom.ValueAnimationTransition | undefined): motion_dom.AnimationPlaybackControlsWithThen;
(value: V | motion_dom.MotionValue, keyframes: V | motion_dom.UnresolvedValueKeyframe[], options?: motion_dom.ValueAnimationTransition | undefined): motion_dom.AnimationPlaybackControlsWithThen;
(element: motion_dom.ElementOrSelector, keyframes: motion_dom.DOMKeyframesDefinition, options?: motion_dom.AnimationOptions | undefined): motion_dom.AnimationPlaybackControlsWithThen;
(object: O | O[], keyframes: ObjectTarget, options?: motion_dom.AnimationOptions | undefined): motion_dom.AnimationPlaybackControlsWithThen;
}];
declare function useAnimateMini(): [AnimationScope, (elementOrSelector: motion_dom.ElementOrSelector, keyframes: motion_dom.DOMKeyframesDefinition, options?: motion_dom.AnimationOptions | undefined) => motion_dom.AnimationPlaybackControlsWithThen];
/**
* Creates `LegacyAnimationControls`, which can be used to manually start, stop
* and sequence animations on one or more components.
*
* The returned `LegacyAnimationControls` should be passed to the `animate` property
* of the components you want to animate.
*
* These components can then be animated with the `start` method.
*
* ```jsx
* import * as React from 'react'
* import { motion, useAnimation } from 'framer-motion'
*
* export function MyComponent(props) {
* const controls = useAnimation()
*
* controls.start({
* x: 100,
* transition: { duration: 0.5 },
* })
*
* return
* }
* ```
*
* @returns Animation controller with `start` and `stop` methods
*
* @public
*/
declare function useAnimationControls(): LegacyAnimationControls;
declare const useAnimation: typeof useAnimationControls;
declare function animateVisualElement(visualElement: VisualElement, definition: AnimationDefinition, options?: VisualElementAnimationOptions): Promise;
type SafeToRemove = () => void;
type AlwaysPresent = [true, null];
type Present = [true];
type NotPresent = [false, SafeToRemove];
/**
* When a component is the child of `AnimatePresence`, it can use `usePresence`
* to access information about whether it's still present in the React tree.
*
* ```jsx
* import { usePresence } from "framer-motion"
*
* export const Component = () => {
* const [isPresent, safeToRemove] = usePresence()
*
* useEffect(() => {
* !isPresent && setTimeout(safeToRemove, 1000)
* }, [isPresent])
*
* return
* }
* ```
*
* If `isPresent` is `false`, it means that a component has been removed the tree, but
* `AnimatePresence` won't really remove it until `safeToRemove` has been called.
*
* @public
*/
declare function usePresence(subscribe?: boolean): AlwaysPresent | Present | NotPresent;
/**
* Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
* There is no `safeToRemove` function.
*
* ```jsx
* import { useIsPresent } from "framer-motion"
*
* export const Component = () => {
* const isPresent = useIsPresent()
*
* useEffect(() => {
* !isPresent && console.log("I've been removed!")
* }, [isPresent])
*
* return
* }
* ```
*
* @public
*/
declare function useIsPresent(): boolean;
declare function usePresenceData(): any;
/**
* Attaches an event listener directly to the provided DOM element.
*
* Bypassing React's event system can be desirable, for instance when attaching non-passive
* event handlers.
*
* ```jsx
* const ref = useRef(null)
*
* useDomEvent(ref, 'wheel', onWheel, { passive: false })
*
* return
* ```
*
* @param ref - React.RefObject that's been provided to the element you want to bind the listener to.
* @param eventName - Name of the event you want listen for.
* @param handler - Function to fire when receiving the event.
* @param options - Options to pass to `Event.addEventListener`.
*
* @public
*/
declare function useDomEvent(ref: RefObject, eventName: string, handler?: EventListener | undefined, options?: AddEventListenerOptions): void;
interface DragControlOptions {
/**
* This distance after which dragging starts and a direction is locked in.
*
* @public
*/
distanceThreshold?: number;
/**
* Whether to immediately snap to the cursor when dragging starts.
*
* @public
*/
snapToCursor?: boolean;
}
/**
* Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.
*
* ```jsx
* const dragControls = useDragControls()
*
* function startDrag(event) {
* dragControls.start(event, { snapToCursor: true })
* }
*
* return (
* <>
*
*
*
* )
* ```
*
* @public
*/
declare class DragControls {
private componentControls;
/**
* Start a drag gesture on every `motion` component that has this set of drag controls
* passed into it via the `dragControls` prop.
*
* ```jsx
* dragControls.start(e, {
* snapToCursor: true
* })
* ```
*
* @param event - PointerEvent
* @param options - Options
*
* @public
*/
start(event: React$1.PointerEvent | PointerEvent, options?: DragControlOptions): void;
/**
* Cancels a drag gesture.
*
* ```jsx
* dragControls.cancel()
* ```
*
* @public
*/
cancel(): void;
/**
* Stops a drag gesture.
*
* ```jsx
* dragControls.stop()
* ```
*
* @public
*/
stop(): void;
}
/**
* Usually, dragging is initiated by pressing down on a `motion` component with a `drag` prop
* and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we
* might want to initiate that dragging from a different component than the draggable one.
*
* By creating a `dragControls` using the `useDragControls` hook, we can pass this into
* the draggable component's `dragControls` prop. It exposes a `start` method
* that can start dragging from pointer events on other components.
*
* ```jsx
* const dragControls = useDragControls()
*
* function startDrag(event) {
* dragControls.start(event, { snapToCursor: true })
* }
*
* return (
* <>
*
*
*
* )
* ```
*
* @public
*/
declare function useDragControls(): DragControls;
/**
* Checks if a component is a `motion` component.
*/
declare function isMotionComponent(component: React.ComponentType | string): boolean;
/**
* Unwraps a `motion` component and returns either a string for `motion.div` or
* the React component for `motion(Component)`.
*
* If the component is not a `motion` component it returns undefined.
*/
declare function unwrapMotionComponent(component: React.ComponentType | string): React.ComponentType | string | undefined;
/**
* Check whether a prop name is a valid `MotionProp` key.
*
* @param key - Name of the property to check
* @returns `true` is key is a valid `MotionProp`.
*
* @public
*/
declare function isValidMotionProp(key: string): boolean;
type ScaleCorrector = (latest: AnyResolvedKeyframe, node: IProjectionNode) => AnyResolvedKeyframe;
interface ScaleCorrectorDefinition {
correct: ScaleCorrector;
applyTo?: string[];
isCSSVariable?: boolean;
}
interface ScaleCorrectorMap {
[key: string]: ScaleCorrectorDefinition;
}
declare function addScaleCorrector(correctors: ScaleCorrectorMap): void;
declare function useInstantLayoutTransition(): (cb?: (() => void) | undefined) => void;
declare function useResetProjection(): () => void;
/**
* Build a CSS transform style from individual x/y/scale etc properties.
*
* This outputs with a default order of transforms/scales/rotations, this can be customised by
* providing a transformTemplate function.
*/
declare function buildTransform(latestValues: ResolvedValues, transform: HTMLRenderState["transform"], transformTemplate?: MotionProps["transformTemplate"]): string;
declare const visualElementStore: WeakMap>;
type FrameCallback = (timestamp: number, delta: number) => void;
declare function useAnimationFrame(callback: FrameCallback): void;
type Cycle = (i?: number) => void;
type CycleState = [T, Cycle];
/**
* Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.
*
* An index value can be passed to the returned `cycle` function to cycle to a specific index.
*
* ```jsx
* import * as React from "react"
* import { motion, useCycle } from "framer-motion"
*
* export const MyComponent = () => {
* const [x, cycleX] = useCycle(0, 50, 100)
*
* return (
* cycleX()}
* />
* )
* }
* ```
*
* @param items - items to cycle through
* @returns [currentState, cycleState]
*
* @public
*/
declare function useCycle(...items: T[]): CycleState;
interface UseInViewOptions extends Omit {
root?: RefObject;
once?: boolean;
amount?: "some" | "all" | number;
initial?: boolean;
}
declare function useInView(ref: RefObject, { root, margin, amount, once, initial, }?: UseInViewOptions): boolean;
declare function useInstantTransition(): (callback: () => void) => void;
declare function disableInstantTransitions(): void;
declare function usePageInView(): boolean;
declare function startOptimizedAppearAnimation(element: HTMLElement, name: string, keyframes: string[] | number[], options: ValueAnimationTransition, onReady?: (animation: Animation) => void): void;
interface NodeGroup {
add: (node: IProjectionNode) => void;
remove: (node: IProjectionNode) => void;
dirty: VoidFunction;
}
interface LayoutGroupContextProps {
id?: string;
group?: NodeGroup;
forceRender?: VoidFunction;
}
declare const LayoutGroupContext: React$1.Context;
interface MotionContextProps {
visualElement?: VisualElement;
initial?: false | string | string[];
animate?: string | string[];
}
declare const MotionContext: React$1.Context>;
/**
* @public
*/
interface ScrollMotionValues {
scrollX: MotionValue;
scrollY: MotionValue;
scrollXProgress: MotionValue;
scrollYProgress: MotionValue;
}
/**
* This is not an officially supported API and may be removed
* on any version.
*/
declare function useAnimatedState(initialState: any): any[];
declare const AnimateSharedLayout: React$1.FunctionComponent>;
/**
* Note: Still used by components generated by old versions of Framer
*
* @deprecated
*/
declare const DeprecatedLayoutGroupContext: React$1.Context;
interface ScaleMotionValues {
scaleX: MotionValue;
scaleY: MotionValue;
}
/**
* Returns a `MotionValue` each for `scaleX` and `scaleY` that update with the inverse
* of their respective parent scales.
*
* This is useful for undoing the distortion of content when scaling a parent component.
*
* By default, `useInvertedScale` will automatically fetch `scaleX` and `scaleY` from the nearest parent.
* By passing other `MotionValue`s in as `useInvertedScale({ scaleX, scaleY })`, it will invert the output
* of those instead.
*
* ```jsx
* const MyComponent = () => {
* const { scaleX, scaleY } = useInvertedScale()
* return
* }
* ```
*
* @deprecated
*/
declare function useInvertedScale(scale?: Partial): ScaleMotionValues;
export { type AbsoluteKeyframe, AnimatePresence, type AnimatePresenceProps, AnimateSharedLayout, type AnimationSequence, type At, CreateVisualElement, type Cycle, type CycleState, DOMMotionComponents, type DOMSegment, type DOMSegmentWithTransition, type DelayedFunction, DeprecatedLayoutGroupContext, DragControls, type FeatureBundle, type FeatureDefinition, type FeatureDefinitions, type FeaturePackage, type FeaturePackages, HTMLElements, HTMLMotionProps, type HydratedFeatureDefinition, type HydratedFeatureDefinitions, IProjectionNode, LayoutGroup, LayoutGroupContext, type LazyFeatureBundle$1 as LazyFeatureBundle, LazyMotion, type LazyProps, MotionConfig, MotionConfigContext, type MotionConfigProps, MotionContext, MotionProps, type MotionValueSegment, type MotionValueSegmentWithTransition, type ObjectSegment, type ObjectSegmentWithTransition, type ObjectTarget, PopChild, PresenceChild, namespace_d as Reorder, type ResolveKeyframes, type ResolvedAnimationDefinition, type ResolvedAnimationDefinitions, ResolvedValues, type ScrollMotionValues, type Segment, type SequenceLabel, type SequenceLabelWithTime, type SequenceMap, type SequenceOptions, type SequenceTime, type UseInViewOptions, type UseScrollOptions, type ValueSequence, VariantLabels, VisualElement, WillChangeMotionValue, addPointerEvent, addPointerInfo, addScaleCorrector, animate, animateMini, animateVisualElement, animationControls, animations, buildTransform, calcLength, createBox, createScopedAnimate, delay, disableInstantTransitions, distance, distance2D, domAnimation, domMax, domMin, filterProps, inView, isBrowser, isMotionComponent, isValidMotionProp, m, motion, resolveMotionValue, scroll, scrollInfo, startOptimizedAppearAnimation, unwrapMotionComponent, useAnimate, useAnimateMini, useAnimation, useAnimationControls, useAnimationFrame, useComposedRefs, useCycle, useAnimatedState as useDeprecatedAnimatedState, useInvertedScale as useDeprecatedInvertedScale, useDomEvent, useDragControls, useElementScroll, useForceUpdate, useInView, useInstantLayoutTransition, useInstantTransition, useIsPresent, useIsomorphicLayoutEffect, useMotionTemplate, useMotionValue, useMotionValueEvent, usePageInView, usePresence, usePresenceData, useReducedMotion, useReducedMotionConfig, useResetProjection, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVelocity, useViewportScroll, useWillChange, visualElementStore };