framer-motion

framer-motion

Version 12.23.24
Published 7 days ago
2.34 MB
3 dependencies
MIT license

Install

npm i framer-motion

yarn add framer-motion

pnpm add framer-motion

Overview

A simple and powerful JavaScript animation library

Index

Variables

variable animate

const animate: {
    (
        sequence: AnimationSequence,
        options?: SequenceOptions
    ): AnimationPlaybackControlsWithThen;
    (
        value: string | MotionValue<string>,
        keyframes: string | UnresolvedValueKeyframe<string>[],
        options?: ValueAnimationTransition<string>
    ): AnimationPlaybackControlsWithThen;
    (
        value: number | MotionValue<number>,
        keyframes: number | UnresolvedValueKeyframe<number>[],
        options?: ValueAnimationTransition<number>
    ): AnimationPlaybackControlsWithThen;
    <V extends string | number>(
        value: any,
        keyframes: V | UnresolvedValueKeyframe<V>[],
        options?: ValueAnimationTransition<V>
    ): AnimationPlaybackControlsWithThen;
    (
        element: ElementOrSelector,
        keyframes: DOMKeyframesDefinition,
        options?: AnimationOptions
    ): AnimationPlaybackControlsWithThen;
    <O extends {}>(
        object: O | O[],
        keyframes: ObjectTarget<O>,
        options?: AnimationOptions
    ): AnimationPlaybackControlsWithThen;
};

variable AnimateSharedLayout

const AnimateSharedLayout: React$1.FunctionComponent<
    React$1.PropsWithChildren<unknown>
>;

variable animations

const animations: FeaturePackages;

variable DeprecatedLayoutGroupContext

const DeprecatedLayoutGroupContext: React$1.Context<string>;

Note: Still used by components generated by old versions of Framer
Deprecated

variable domAnimation

const domAnimation: FeatureBundle;

Modifiers
- @public

variable domMax

const domMax: FeatureBundle;

Modifiers
- @public

variable domMin

const domMin: FeatureBundle;

Modifiers
- @public

variable isBrowser

const isBrowser: boolean;

variable LayoutGroup

const LayoutGroup: React$1.FunctionComponent<React$1.PropsWithChildren<Props$2>>;

variable LayoutGroupContext

const LayoutGroupContext: React$1.Context<LayoutGroupContextProps>;

variable m

const m: (<Props, TagName extends string = 'div'>(
    Component: any,
    { forwardMotionProps }?: MotionComponentOptions,
    preloadedFeatures?: FeaturePackages,
    createVisualElement?: CreateVisualElement<Props, TagName>
) => MotionComponent<TagName, Props>) &
    HTMLMotionComponents &
    SVGMotionComponents & { create: typeof createMotionComponent };

variable motion

const motion: (<Props, TagName extends string = 'div'>(
    Component: any,
    { forwardMotionProps }?: MotionComponentOptions,
    preloadedFeatures?: FeaturePackages,
    createVisualElement?: CreateVisualElement<Props, TagName>
) => MotionComponent<TagName, Props>) &
    HTMLMotionComponents &
    SVGMotionComponents & { create: typeof createMotionComponent };

variable MotionConfigContext

const MotionConfigContext: React$1.Context<MotionConfigContext>;

Modifiers
- @public

variable MotionContext

const MotionContext: React$1.Context<MotionContextProps<unknown>>;

variable optimizedAppearDataAttribute

const optimizedAppearDataAttribute: string;

variable PresenceContext

const PresenceContext: React$1.Context<PresenceContextProps>;

Modifiers
- @public

variable SwitchLayoutGroupContext

const SwitchLayoutGroupContext: React$1.Context<SwitchLayoutGroupContext>;

Internal, exported only for usage in Framer

variable useAnimation

const useAnimation: () => LegacyAnimationControls;

variable useIsomorphicLayoutEffect

const useIsomorphicLayoutEffect: any;

variable visualElementStore

const visualElementStore: WeakMap<any, VisualElement<unknown, unknown, {}>>;

Functions

function addPointerEvent

addPointerEvent: (
    target: EventTarget,
    eventName: string,
    handler: EventListenerWithPointInfo,
    options?: AddEventListenerOptions
) => () => void;

function addPointerInfo

addPointerInfo: (handler: EventListenerWithPointInfo) => EventListener;

function addScaleCorrector

addScaleCorrector: (correctors: ScaleCorrectorMap) => void;

function animateMini

animateMini: (
    elementOrSelector: ElementOrSelector,
    keyframes: DOMKeyframesDefinition,
    options?: AnimationOptions
) => AnimationPlaybackControlsWithThen;

function AnimatePresence

AnimatePresence: ({
    children,
    custom,
    initial,
    onExitComplete,
    presenceAffectsLayout,
    mode,
    propagate,
    anchorX,
    root,
}: React$1.PropsWithChildren<AnimatePresenceProps>) => react_jsx_runtime.JSX.Element | null;

AnimatePresence enables the animation of components that have been removed from the tree.
When adding/removing more than a single child, every child **must** be given a unique key prop.
Any motion components that have an exit property defined will animate out when removed from the tree.
import { motion, AnimatePresence } from 'framer-motion' export const Items = ({ items }) => ( <AnimatePresence> {items.map(item => ( <motion.div key={item.id} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} /> ))} </AnimatePresence> )
You can sequence exit animations throughout a tree using variants.
If a child contains multiple motion components with exit props, it will only unmount the child once all motion components have finished animating out. Likewise, any components using usePresence all need to call safeToRemove.
Modifiers
- @public

function animateVisualElement

animateVisualElement: (
    visualElement: VisualElement,
    definition: AnimationDefinition,
    options?: VisualElementAnimationOptions
) => Promise<void>;

function animationControls

animationControls: () => LegacyAnimationControls;

Modifiers
- @public

function buildTransform

buildTransform: (
    latestValues: ResolvedValues,
    transform: HTMLRenderState['transform'],
    transformTemplate?: any
) => string;

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.

function calcLength

calcLength: (axis: Axis) => number;

function createBox

createBox: () => Box;

function createMotionComponent

createMotionComponent: <Props, TagName extends string = 'div'>(
    Component: TagName | string | React$1.ComponentType<Props>,
    { forwardMotionProps }?: MotionComponentOptions,
    preloadedFeatures?: FeaturePackages,
    createVisualElement?: CreateVisualElement<Props, TagName>
) => MotionComponent<TagName, Props>;

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.

function createScopedAnimate

createScopedAnimate: (scope?: AnimationScope) => {
    (
        sequence: AnimationSequence,
        options?: SequenceOptions
    ): AnimationPlaybackControlsWithThen;
    (
        value: string | MotionValue<string>,
        keyframes: string | UnresolvedValueKeyframe<string>[],
        options?: ValueAnimationTransition<string>
    ): AnimationPlaybackControlsWithThen;
    (
        value: number | MotionValue<number>,
        keyframes: number | UnresolvedValueKeyframe<number>[],
        options?: ValueAnimationTransition<number>
    ): AnimationPlaybackControlsWithThen;
    <V extends string | number>(
        value: any,
        keyframes: V | UnresolvedValueKeyframe<V>[],
        options?: ValueAnimationTransition<V>
    ): AnimationPlaybackControlsWithThen;
    (
        element: ElementOrSelector,
        keyframes: DOMKeyframesDefinition,
        options?: AnimationOptions
    ): AnimationPlaybackControlsWithThen;
    <O extends {}>(
        object: O | O[],
        keyframes: ObjectTarget<O>,
        options?: AnimationOptions
    ): AnimationPlaybackControlsWithThen;
};

Creates an animation function that is optionally scoped to a specific element.

function delay

delay: (callback: DelayedFunction, timeout: number) => () => void;

Timeout defined in ms

function disableInstantTransitions

disableInstantTransitions: () => void;

function distance

distance: (a: number, b: number) => number;

function distance2D

distance2D: (a: Point, b: Point) => number;

function filterProps

filterProps: (
    props: MotionProps,
    isDom: boolean,
    forwardMotionProps: boolean
) => MotionProps;

function inView

inView: (
    elementOrSelector: ElementOrSelector,
    onStart: (
        element: Element,
        entry: IntersectionObserverEntry
    ) => void | ViewChangeHandler,
    { root, margin: rootMargin, amount }?: InViewOptions
) => VoidFunction;

function isMotionComponent

isMotionComponent: (component: React.ComponentType | string) => boolean;

Checks if a component is a motion component.

function isValidMotionProp

isValidMotionProp: (key: string) => boolean;

Check whether a prop name is a valid MotionProp key.
Parameter key
Name of the property to check
Returns
true is key is a valid MotionProp.
Modifiers
- @public

function LazyMotion

LazyMotion: ({
    children,
    features,
    strict,
}: LazyProps) => react_jsx_runtime.JSX.Element;

Used in conjunction with the m component to reduce bundle size.

m is a version of the motion component that only loads functionality critical for the initial render.

LazyMotion can then be used to either synchronously or asynchronously load animation and gesture support.

// Synchronous loading
import { LazyMotion, m, domAnimation } from "framer-motion"

function App() {
  return (
    <LazyMotion features={domAnimation}>
      <m.div animate={{ scale: 2 }} />
    </LazyMotion>
  )
}

// Asynchronous loading
import { LazyMotion, m } from "framer-motion"

function App() {
  return (
    <LazyMotion features={() => import('./path/to/domAnimation')}>
      <m.div animate={{ scale: 2 }} />
    </LazyMotion>
  )
}

Modifiers

@public

function makeUseVisualState

makeUseVisualState: <I, RS>(
    config: UseVisualStateConfig<RS>
) => UseVisualState<I, RS>;

function MeasureLayout

MeasureLayout: (
    props: MotionProps & { visualElement: VisualElement }
) => react_jsx_runtime.JSX.Element;

function MotionConfig

MotionConfig: ({
    children,
    isValidProp,
    ...config
}: MotionConfigProps) => react_jsx_runtime.JSX.Element;

MotionConfig is used to set configuration options for all children motion components.

import { motion, MotionConfig } from "framer-motion"

export function App() {
  return (
    <MotionConfig transition={{ type: "spring" }}>
      <motion.div animate={{ x: 100 }} />
    </MotionConfig>
  )
}

Modifiers

@public

function PopChild

PopChild: ({
    children,
    isPresent,
    anchorX,
    root,
}: Props$3) => react_jsx_runtime.JSX.Element;

function PresenceChild

PresenceChild: ({
    children,
    initial,
    isPresent,
    onExitComplete,
    custom,
    presenceAffectsLayout,
    mode,
    anchorX,
    root,
}: PresenceChildProps) => react_jsx_runtime.JSX.Element;

function ReorderGroup

ReorderGroup: <V, TagName extends keyof HTMLElements = 'ul'>(
    props: any
) => JSX.Element;

function ReorderGroupComponent

ReorderGroupComponent: <V, TagName extends keyof HTMLElements = 'ul'>(
    {
        children,
        as,
        axis,
        onReorder,
        values,
        ...props
    }: ReorderGroupProps<V, TagName>,
    externalRef?: React$1.ForwardedRef<any>
) => JSX.Element;

function ReorderItem

ReorderItem: <V, TagName extends keyof HTMLElements = 'li'>(
    props: any
) => JSX.Element;

function ReorderItemComponent

ReorderItemComponent: <V, TagName extends keyof HTMLElements = 'li'>(
    {
        children,
        style,
        value,
        as,
        onDrag,
        layout,
        ...props
    }: ReorderItemProps<V, TagName>,
    externalRef?: React$1.ForwardedRef<any>
) => JSX.Element;

function resolveMotionValue

resolveMotionValue: (
    value?: AnyResolvedKeyframe | MotionValue
) => AnyResolvedKeyframe;

If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
TODO: Remove and move to library

function scroll

scroll: (
    onScroll: OnScroll | AnimationPlaybackControls,
    { axis, container, ...options }?: ScrollOptions
) => VoidFunction;

function scrollInfo

scrollInfo: (
    onScroll: OnScrollInfo,
    { container, ...options }?: ScrollInfoOptions
) => VoidFunction;

function startOptimizedAppearAnimation

startOptimizedAppearAnimation: (
    element: HTMLElement,
    name: string,
    keyframes: string[] | number[],
    options: ValueAnimationTransition<string | number>,
    onReady?: (animation: Animation) => void
) => void;

function unwrapMotionComponent

unwrapMotionComponent: (
    component: React.ComponentType | string
) => React.ComponentType | string | undefined;

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.

function useAnimate

useAnimate: <T extends Element = any>() => [
    AnimationScope<T>,
    {
        (
            sequence: AnimationSequence,
            options?: SequenceOptions | undefined
        ): motion_dom.AnimationPlaybackControlsWithThen;
        (
            value: string | motion_dom.MotionValue<string>,
            keyframes: string | motion_dom.UnresolvedValueKeyframe<string>[],
            options?: motion_dom.ValueAnimationTransition<string> | undefined
        ): motion_dom.AnimationPlaybackControlsWithThen;
        (
            value: number | motion_dom.MotionValue<number>,
            keyframes: number | motion_dom.UnresolvedValueKeyframe<number>[],
            options?: motion_dom.ValueAnimationTransition<number> | undefined
        ): motion_dom.AnimationPlaybackControlsWithThen;
        <V extends string | number>(
            value: any,
            keyframes: V | motion_dom.UnresolvedValueKeyframe<V>[],
            options?: any
        ): motion_dom.AnimationPlaybackControlsWithThen;
        (
            element: motion_dom.ElementOrSelector,
            keyframes: motion_dom.DOMKeyframesDefinition,
            options?: motion_dom.AnimationOptions | undefined
        ): motion_dom.AnimationPlaybackControlsWithThen;
        <O extends {}>(
            object: O | O[],
            keyframes: ObjectTarget<O>,
            options?: motion_dom.AnimationOptions | undefined
        ): motion_dom.AnimationPlaybackControlsWithThen;
    }
];

function useAnimateMini

useAnimateMini: <T extends Element = any>() => [
    AnimationScope<T>,
    (
        elementOrSelector: motion_dom.ElementOrSelector,
        keyframes: motion_dom.DOMKeyframesDefinition,
        options?: motion_dom.AnimationOptions | undefined
    ) => motion_dom.AnimationPlaybackControlsWithThen
];

function useAnimationControls

useAnimationControls: () => LegacyAnimationControls;

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.
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 <motion.div animate={controls} /> }
Returns
Animation controller with start and stop methods
Modifiers
- @public

function useAnimationFrame

useAnimationFrame: (callback: FrameCallback) => void;

function useComposedRefs

useComposedRefs: <T>(...refs: PossibleRef<T>[]) => React$1.RefCallback<T>;

A custom hook that composes multiple refs Accepts callback refs and RefObject(s)

function useCycle

useCycle: <T>(...items: T[]) => CycleState<T>;

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.
import * as React from "react" import { motion, useCycle } from "framer-motion" export const MyComponent = () => { const [x, cycleX] = useCycle(0, 50, 100) return ( <motion.div animate={{ x: x }} onTap={() => cycleX()} /> ) }
Parameter items
items to cycle through
Returns
[currentState, cycleState]
Modifiers
- @public

function useDeprecatedAnimatedState

useDeprecatedAnimatedState: (initialState: any) => any[];

This is not an officially supported API and may be removed on any version.

function useDeprecatedInvertedScale

useDeprecatedInvertedScale: (
    scale?: Partial<ScaleMotionValues>
) => ScaleMotionValues;

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 MotionValues in as useInvertedScale({ scaleX, scaleY }), it will invert the output of those instead.
const MyComponent = () => { const { scaleX, scaleY } = useInvertedScale() return <motion.div style={{ scaleX, scaleY }} /> }
Deprecated

function useDomEvent

useDomEvent: (
    ref: RefObject<EventTarget>,
    eventName: string,
    handler?: EventListener | undefined,
    options?: AddEventListenerOptions
) => void;

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.
const ref = useRef(null) useDomEvent(ref, 'wheel', onWheel, { passive: false }) return <div ref={ref} />
Parameter ref
React.RefObject that's been provided to the element you want to bind the listener to.
Parameter eventName
Name of the event you want listen for.
Parameter handler
Function to fire when receiving the event.
Parameter options
Options to pass to Event.addEventListener.
Modifiers
- @public

function useDragControls

useDragControls: () => DragControls;

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.
const dragControls = useDragControls() function startDrag(event) { dragControls.start(event, { snapToCursor: true }) } return ( <> <div onPointerDown={startDrag} /> <motion.div drag="x" dragControls={dragControls} /> </> )
Modifiers
- @public

function useElementScroll

useElementScroll: (ref: RefObject<HTMLElement>) => {
    scrollX: motion_dom.MotionValue<number>;
    scrollY: motion_dom.MotionValue<number>;
    scrollXProgress: motion_dom.MotionValue<number>;
    scrollYProgress: motion_dom.MotionValue<number>;
};

Deprecated
useElementScroll is deprecated. Convert to useScroll({ container: ref })

function useForceUpdate

useForceUpdate: () => [VoidFunction, number];

function useInstantLayoutTransition

useInstantLayoutTransition: () => (cb?: (() => void) | undefined) => void;

function useInstantTransition

useInstantTransition: () => (callback: () => void) => void;

function useInView

useInView: (
    ref: RefObject<Element>,
    { root, margin, amount, once, initial }?: UseInViewOptions
) => boolean;

function useIsPresent

useIsPresent: () => boolean;

Similar to usePresence, except useIsPresent simply returns whether or not the component is present. There is no safeToRemove function.

import { useIsPresent } from "framer-motion"

export const Component = () => {
  const isPresent = useIsPresent()

  useEffect(() => {
    !isPresent && console.log("I've been removed!")
  }, [isPresent])

  return <div />
}

Modifiers

@public

function useMotionTemplate

useMotionTemplate: (
    fragments: TemplateStringsArray,
    ...values: Array<MotionValue | number | string>
) => MotionValue<string>;

Combine multiple motion values into a new one using a string template literal.

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 <motion.div style={{ filter: shadow }} />
}

Modifiers

@public

function useMotionValue

useMotionValue: <T>(initial: T) => MotionValue<T>;

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 MotionValues externally and pass them into the animated component via the style prop.
export const MyComponent = () => { const scale = useMotionValue(1) return <motion.div style={{ scale }} /> }
Parameter initial
The initial state.
Modifiers
- @public

function useMotionValueEvent

useMotionValueEvent: <V, EventName extends string | number | symbol>(
    value: MotionValue<V>,
    event: EventName,
    callback: MotionValueEventCallbacks<V>
) => void;

function usePageInView

usePageInView: () => boolean;

function usePresence

usePresence: (subscribe?: boolean) => AlwaysPresent | Present | NotPresent;

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.
import { usePresence } from "framer-motion" export const Component = () => { const [isPresent, safeToRemove] = usePresence() useEffect(() => { !isPresent && setTimeout(safeToRemove, 1000) }, [isPresent]) return <div /> }
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.
Modifiers
- @public

function usePresenceData

usePresenceData: () => any;

function useReducedMotion

useReducedMotion: () => boolean | null;

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.
export function Sidebar({ isOpen }) { const shouldReduceMotion = useReducedMotion() const closedX = shouldReduceMotion ? 0 : "-100%" return ( <motion.div animate={{ opacity: isOpen ? 1 : 0, x: isOpen ? 0 : closedX }} /> ) }
boolean
Modifiers
- @public

function useReducedMotionConfig

useReducedMotionConfig: () => boolean | null;

function useResetProjection

useResetProjection: () => () => void;

function useScroll

useScroll: ({ container, target, ...options }?: UseScrollOptions) => {
    scrollX: motion_dom.MotionValue<number>;
    scrollY: motion_dom.MotionValue<number>;
    scrollXProgress: motion_dom.MotionValue<number>;
    scrollYProgress: motion_dom.MotionValue<number>;
};

function useSpring

useSpring: {
    (source: MotionValue<string>, options?: SpringOptions): MotionValue<string>;
    (source: string, options?: SpringOptions): MotionValue<string>;
    (source: MotionValue<number>, options?: SpringOptions): MotionValue<number>;
    (source: number, options?: SpringOptions): MotionValue<number>;
};

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.
Parameter inputValue
MotionValue or number. If provided a MotionValue, when the input MotionValue changes, the created MotionValue will spring towards that value.
Parameter springConfig
Configuration options for the spring.
Returns
MotionValue
Remarks
const x = useSpring(0, { stiffness: 300 }) const y = useSpring(x, { damping: 10 })
Modifiers
- @public

function useTime

useTime: () => motion_dom.MotionValue<number>;

function useTransform

useTransform: {
    <I, O>(
        value: MotionValue<number>,
        inputRange: InputRange,
        outputRange: O[],
        options?: TransformOptions<O>
    ): MotionValue<O>;
    <I, O>(
        input: MotionValue<I>,
        transformer: SingleTransformer<I, O>
    ): MotionValue<O>;
    <I, O>(
        input:
            | MotionValue<string>[]
            | MotionValue<number>[]
            | MotionValue<AnyResolvedKeyframe>[],
        transformer: MultiTransformer<I, O>
    ): MotionValue<O>;
    <I, O>(transformer: () => O): MotionValue<O>;
};

Create a MotionValue that transforms the output of another MotionValue by mapping it from one range of values into another.
Parameter inputValue
MotionValue
Parameter inputRange
A linear series of numbers (either all increasing or decreasing)
Parameter outputRange
A series of numbers, colors or strings. Must be the same length as inputRange.
Parameter 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
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.
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 ( <motion.div animate={{ x: 200 }} style={{ opacity, x }} /> ) }
Modifiers
- @public
Create a MotionValue that transforms the output of another MotionValue through a function. In this example, y will always be double x.
export const MyComponent = () => { const x = useMotionValue(10) const y = useTransform(x, value => value * 2) return <motion.div style={{ x, y }} /> }
Parameter input
A MotionValue that will pass its latest value through transform to update the returned MotionValue.
Parameter transform
A function that accepts the latest value from input and returns a new value.
Returns
MotionValue
Modifiers
- @public
Pass an array of MotionValues and a function to combine them. In this example, z will be the x multiplied by y.
export const MyComponent = () => { const x = useMotionValue(0) const y = useMotionValue(0) const z = useTransform([x, y], ([latestX, latestY]) => latestX * latestY) return <motion.div style={{ x, y, z }} /> }
Parameter input
An array of MotionValues that will pass their latest values through transform to update the returned MotionValue.
Parameter transform
A function that accepts the latest values from input and returns a new value.
Returns
MotionValue
Modifiers
- @public

function useUnmountEffect

useUnmountEffect: (callback: () => void) => void;

function useVelocity

useVelocity: (value: MotionValue<number>) => MotionValue<number>;

Creates a MotionValue that updates when the velocity of the provided MotionValue changes.

const x = useMotionValue(0)
const xVelocity = useVelocity(x)
const xAcceleration = useVelocity(xVelocity)

Modifiers

@public

function useViewportScroll

useViewportScroll: () => {
    scrollX: motion_dom.MotionValue<number>;
    scrollY: motion_dom.MotionValue<number>;
    scrollXProgress: motion_dom.MotionValue<number>;
    scrollYProgress: motion_dom.MotionValue<number>;
};

Deprecated
useViewportScroll is deprecated. Convert to useScroll()

function useWillChange

useWillChange: () => WillChange;

Classes

class DragControls

class DragControls {}

Can manually trigger a drag gesture on one or more drag-enabled motion components.

const dragControls = useDragControls()

function startDrag(event) {
  dragControls.start(event, { snapToCursor: true })
}

return (
  <>
    <div onPointerDown={startDrag} />
    <motion.div drag="x" dragControls={dragControls} />
  </>
)

Modifiers

@public

method cancel

cancel: () => void;

Cancels a drag gesture.
dragControls.cancel()
Modifiers
- @public

method start

start: (
    event: React$1.PointerEvent | PointerEvent,
    options?: DragControlOptions
) => void;

Start a drag gesture on every motion component that has this set of drag controls passed into it via the dragControls prop.
dragControls.start(e, { snapToCursor: true })
Parameter event
PointerEvent
Parameter options
Options
Modifiers
- @public

method stop

stop: () => void;

Stops a drag gesture.
dragControls.stop()
Modifiers
- @public

class FlatTree

class FlatTree {}

method add

add: (child: WithDepth) => void;

method forEach

forEach: (callback: (child: WithDepth) => void) => void;

method remove

remove: (child: WithDepth) => void;

class VisualElement

abstract class VisualElement<
    Instance = unknown,
    RenderState = unknown,
    Options extends {} = {}
> {}

A VisualElement is an imperative abstraction around UI elements such as HTMLElement, SVGElement, Three.Object3D etc.

constructor

constructor(
    {
        parent,
        props,
        presenceContext,
        reducedMotionConfig,
        blockInitialAnimation,
        visualState,
    }: VisualElementOptions<Instance, RenderState>,
    options?: {}
);

property animationState

animationState?: AnimationState;

The AnimationState, this is hydrated by the animation Feature.

property blockInitialAnimation

blockInitialAnimation: boolean;

This can be set by AnimatePresence to force components that mount at the same time as it to mount as if they have initial={false} set.

property children

children: Set<VisualElement<unknown, unknown, {}>>;

A set containing references to this VisualElement's children.

property current

current: {};

A reference to the current underlying Instance, e.g. a HTMLElement or Three.Mesh etc.

property depth

depth: number;

The depth of this VisualElement within the overall VisualElement tree.

property enteringChildren

enteringChildren?: Set<VisualElement<unknown, unknown, {}>>;

A set containing the latest children of this VisualElement. This is flushed at the start of every commit. We use it to calculate the stagger delay for newly-added children.

property isControllingVariants

isControllingVariants: boolean;

property isVariantNode

isVariantNode: boolean;

Determine what role this visual element should take in the variant tree.

property KeyframeResolver

KeyframeResolver: any;

property latestValues

latestValues: ResolvedValues;

An object containing the latest static values for each of this VisualElement's MotionValues.

property manuallyAnimateOnMount

manuallyAnimateOnMount: boolean;

Normally, if a component is controlled by a parent's variants, it can rely on that ancestor to trigger animations further down the tree. However, if a component is created after its parent is mounted, the parent won't trigger that mount animation so the child needs to.
TODO: This might be better replaced with a method isParentMounted

property notifyUpdate

notifyUpdate: () => void;

property options

readonly options: {};

The options used to create this VisualElement. The Options type is defined by the inheriting VisualElement and is passed straight through to the render functions.

property parent

parent: VisualElement<unknown, unknown, {}>;

A reference to the parent VisualElement (if exists).

property presenceContext

presenceContext: PresenceContextProps;

property prevPresenceContext

prevPresenceContext?: PresenceContextProps;

property prevProps

prevProps?: MotionProps;

property projection

projection?: IProjectionNode<unknown>;

A reference to this VisualElement's projection node, used in layout animations.

property props

props: MotionProps;

A reference to the latest props provided to the VisualElement's host React component.

property render

render: () => void;

property renderState

renderState: {};

The current render state of this VisualElement. Defined by inherting VisualElements.

property scheduleRender

scheduleRender: () => void;

property shouldReduceMotion

shouldReduceMotion: boolean;

Decides whether this VisualElement should animate in reduced motion mode.
TODO: This is currently set on every individual VisualElement but feels like it could be set globally.

property type

abstract type: string;

VisualElements are arranged in trees mirroring that of the React tree. Each type of VisualElement has a unique name, to detect when we're crossing type boundaries within that tree.

property values

values: Map<string, MotionValue<any>>;

A map of all motion values attached to this visual element. Motion values are source of truth for any given animated value. A motion value might be provided externally by the component via props.

property variantChildren

variantChildren?: Set<VisualElement<unknown, unknown, {}>>;

If this component is part of the variant tree, it should track any children that are also part of the tree. This is essentially a shadow tree to simplify logic around how to stagger over children.

method addChild

addChild: (child: VisualElement) => void;

method addValue

addValue: (key: string, value: MotionValue) => void;

Add a motion value and bind it to this visual element.

method addVariantChild

addVariantChild: (child: VisualElement) => (() => boolean) | undefined;

Add a child visual element to our set of children.

method build

abstract build: (
    renderState: RenderState,
    latestValues: ResolvedValues,
    props: MotionProps
) => void;

Run before a React or VisualElement render, builds the latest motion values into an Instance-specific format. For example, HTMLVisualElement will use this step to build style and var values.

method getBaseTarget

getBaseTarget: (key: string) => ResolvedValues[string] | undefined | null;

Find the base target for a value thats been removed from all animation props.

method getBaseTargetFromProps

abstract getBaseTargetFromProps: (
    props: MotionProps,
    key: string
) => AnyResolvedKeyframe | undefined | MotionValue;

When a value has been removed from all animation props we need to pick a target to animate back to. For instance, for HTMLElements we can look in the style prop.

method getClosestVariantNode

getClosestVariantNode: () => VisualElement | undefined;

method getDefaultTransition

getDefaultTransition: () => motion_dom.Transition<any> | undefined;

Returns the defined default transition on this component.

method getProps

getProps: () => MotionProps;

method getStaticValue

getStaticValue: (key: string) => AnyResolvedKeyframe;

method getTransformPagePoint

getTransformPagePoint: () => any;

method getValue

getValue: {
    (key: string): MotionValue | undefined;
    (key: string, defaultValue: any): MotionValue;
};

Get a motion value for this key. If called with a default value, we'll create one if none exists.

method getVariant

getVariant: (name: string) => motion_dom.Variant | undefined;

Returns the variant definition with a given name.

method handleChildMotionValue

handleChildMotionValue: () => void;

If the component child is provided as a motion value, handle subscriptions with the renderer-specific VisualElement.

method hasValue

hasValue: (key: string) => boolean;

Check whether we have a motion value for this key

method measureInstanceViewportBox

abstract measureInstanceViewportBox: (
    instance: Instance,
    props: MotionProps & Partial<MotionConfigContext>
) => Box;

Measure the viewport-relative bounding box of the Instance.

method measureViewportBox

measureViewportBox: () => Box;

Measure the current viewport box with or without transforms. Only measures axis-aligned boxes, rotate and skew must be manually removed with a re-render to work.

method mount

mount: (instance: Instance) => void;

method notify

notify: <EventName extends keyof VisualElementEventCallbacks>(
    eventName: EventName,
    ...args: any
) => void;

method on

on: <EventName extends keyof VisualElementEventCallbacks>(
    eventName: EventName,
    callback: VisualElementEventCallbacks[EventName]
) => VoidFunction;

method onBindTransform

onBindTransform: () => void;

This method is called when a transform property is bound to a motion value. It's currently used to measure SVG elements when a new transform property is bound.

method readValue

readValue: (key: string, target?: AnyResolvedKeyframe | null) => any;

If we're trying to animate to a previously unencountered value, we need to check for it in our state and as a last resort read it directly from the instance (which might have performance implications).

method readValueFromInstance

abstract readValueFromInstance: (
    instance: Instance,
    key: string,
    options: Options
) => AnyResolvedKeyframe | null | undefined;

When we first animate to a value we need to animate it *from* a value. Often this have been specified via the initial prop but it might be that the value needs to be read from the Instance.

method removeChild

removeChild: (child: VisualElement) => void;

method removeValue

removeValue: (key: string) => void;

Remove a motion value and unbind any active subscriptions.

method removeValueFromRenderState

abstract removeValueFromRenderState: (
    key: string,
    renderState: RenderState
) => void;

When a value has been removed from the VisualElement we use this to remove it from the inherting class' unique render state.

method renderInstance

abstract renderInstance: (
    instance: Instance,
    renderState: RenderState,
    styleProp?: MotionStyle,
    projection?: IProjectionNode
) => void;

Apply the built values to the Instance. For example, HTMLElements will have styles applied via setProperty and the style attribute, whereas SVGElements will have values applied to attributes.

method scheduleRenderMicrotask

scheduleRenderMicrotask: () => void;

method scrapeMotionValuesFromProps

scrapeMotionValuesFromProps: (
    _props: MotionProps,
    _prevProps: MotionProps,
    _visualElement: VisualElement
) => { [key: string]: any };

This method takes React props and returns found MotionValues. For example, HTML MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
This isn't an abstract method as it needs calling in the constructor, but it is intended to be one.

method setBaseTarget

setBaseTarget: (key: string, value: AnyResolvedKeyframe) => void;

Set the base target to later animate back to. This is currently only hydrated on creation and when we first read a value.

method setStaticValue

setStaticValue: (key: string, value: AnyResolvedKeyframe) => void;

method sortInstanceNodePosition

abstract sortInstanceNodePosition: (a: Instance, b: Instance) => number;

An Array.sort compatible function that will compare two Instances and compare their respective positions within the tree.

method sortNodePosition

sortNodePosition: (other: VisualElement<Instance>) => number;

method triggerBuild

triggerBuild: () => void;

method unmount

unmount: () => void;

method update

update: (
    props: MotionProps,
    presenceContext: PresenceContextProps | null
) => void;

Update the provided props. Ensure any newly-added motion values are added to our map, old ones removed, and listeners updated.

method updateFeatures

updateFeatures: () => void;

class WillChangeMotionValue

class WillChangeMotionValue extends MotionValue<string> implements WillChange {}

method add

add: (name: string) => void;

Interfaces

interface AbsoluteKeyframe

interface AbsoluteKeyframe {}

property at

at: number;

property easing

easing?: Easing;

property value

value: AnyResolvedKeyframe | null;

interface AnimatePresenceProps

interface AnimatePresenceProps {}

Modifiers
- @public

property anchorX

anchorX?: 'left' | 'right';

Internal. Set whether to anchor the x position of the exiting element to the left or right when using mode="popLayout".

property custom

custom?: any;

When a component is removed, there's no longer a chance to update its props. So if a component's exit prop is defined as a dynamic variant and you want to pass a new custom prop, you can do so via AnimatePresence. This will ensure all leaving components animate using the latest data.
Modifiers
- @public

property initial

initial?: boolean;

By passing initial={false}, AnimatePresence will disable any initial animations on children that are present when the component is first rendered.

<AnimatePresence initial={false}>
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    />
  )}
</AnimatePresence>

Modifiers

@public

property mode

mode?: 'sync' | 'popLayout' | 'wait';

Determines how to handle entering and exiting elements.
- "sync": Default. Elements animate in and out as soon as they're added/removed. - "popLayout": Exiting elements are "popped" from the page layout, allowing sibling elements to immediately occupy their new layouts. - "wait": Only renders one component at a time. Wait for the exiting component to animate out before animating the next component in.
Modifiers
- @public

property onExitComplete

onExitComplete?: () => void;

Fires when all exiting nodes have completed animating out.
Modifiers
- @public

property presenceAffectsLayout

presenceAffectsLayout?: boolean;

Internal. Used in Framer to flag that sibling children *shouldn't* re-render as a result of a child being removed.

property propagate

propagate?: boolean;

If true, the AnimatePresence component will propagate parent exit animations to its children.

property root

root?: HTMLElement | ShadowRoot;

Root element to use when injecting styles, used when mode === "popLayout". This defaults to document.head but can be overridden e.g. for use in shadow DOM.

interface At

interface At {}

property at

at?: SequenceTime;

interface FeatureBundle

interface FeatureBundle extends FeaturePackages {}

property renderer

renderer: CreateVisualElement;

interface FeatureDefinition

interface FeatureDefinition {}

property Feature

Feature?: HydratedFeatureDefinition['Feature'];

property isEnabled

isEnabled: HydratedFeatureDefinition['isEnabled'];

property MeasureLayout

MeasureLayout?: HydratedFeatureDefinition['MeasureLayout'];

property ProjectionNode

ProjectionNode?: HydratedFeatureDefinition['ProjectionNode'];

interface FeaturePackage

interface FeaturePackage {}

property Feature

Feature?: HydratedFeatureDefinition['Feature'];

property MeasureLayout

MeasureLayout?: HydratedFeatureDefinition['MeasureLayout'];

property ProjectionNode

ProjectionNode?: HydratedFeatureDefinition['ProjectionNode'];

interface HTMLElements

interface HTMLElements {}

property a

a: HTMLAnchorElement;

property abbr

abbr: HTMLElement;

property address

address: HTMLElement;

property area

area: HTMLAreaElement;

property article

article: HTMLElement;

property aside

aside: HTMLElement;

property audio

audio: HTMLAudioElement;

property b

b: HTMLElement;

property base

base: HTMLBaseElement;

property bdi

bdi: HTMLElement;

property bdo

bdo: HTMLElement;

property big

big: HTMLElement;

property blockquote

blockquote: HTMLQuoteElement;

property body

body: HTMLBodyElement;

property br

br: HTMLBRElement;

property button

button: HTMLButtonElement;

property canvas

canvas: HTMLCanvasElement;

property caption

caption: HTMLElement;

property center

center: HTMLElement;

property cite

cite: HTMLElement;

property code

code: HTMLElement;

property col

col: HTMLTableColElement;

property colgroup

colgroup: HTMLTableColElement;

property data

data: HTMLDataElement;

property datalist

datalist: HTMLDataListElement;

property dd

dd: HTMLElement;

property del

del: HTMLModElement;

property details

details: HTMLDetailsElement;

property dfn

dfn: HTMLElement;

property dialog

dialog: HTMLDialogElement;

property div

div: HTMLDivElement;

property dl

dl: HTMLDListElement;

property dt

dt: HTMLElement;

property em

em: HTMLElement;

property embed

embed: HTMLEmbedElement;

property fieldset

fieldset: HTMLFieldSetElement;

property figcaption

figcaption: HTMLElement;

property figure

figure: HTMLElement;

footer: HTMLElement;

property form

form: HTMLFormElement;

property h1

h1: HTMLHeadingElement;

property h2

h2: HTMLHeadingElement;

property h3

h3: HTMLHeadingElement;

property h4

h4: HTMLHeadingElement;

property h5

h5: HTMLHeadingElement;

property h6

h6: HTMLHeadingElement;

property head

head: HTMLHeadElement;

header: HTMLElement;

property hgroup

hgroup: HTMLElement;

property hr

hr: HTMLHRElement;

property html

html: HTMLHtmlElement;

property i

i: HTMLElement;

property iframe

iframe: HTMLIFrameElement;

property img

img: HTMLImageElement;

property input

input: HTMLInputElement;

property ins

ins: HTMLModElement;

property kbd

kbd: HTMLElement;

property keygen

keygen: HTMLElement;

property label

label: HTMLLabelElement;

property legend

legend: HTMLLegendElement;

property li

li: HTMLLIElement;

property link

link: HTMLLinkElement;

property main

main: HTMLElement;

property map

map: HTMLMapElement;

property mark

mark: HTMLElement;

menu: HTMLElement;

property menuitem

menuitem: HTMLElement;

property meta

meta: HTMLMetaElement;

property meter

meter: HTMLMeterElement;

property nav

nav: HTMLElement;

property noindex

noindex: HTMLElement;

property noscript

noscript: HTMLElement;

property object

object: HTMLObjectElement;

property ol

ol: HTMLOListElement;

property optgroup

optgroup: HTMLOptGroupElement;

property option

option: HTMLOptionElement;

property output

output: HTMLOutputElement;

property p

p: HTMLParagraphElement;

property param

param: HTMLParamElement;

property picture

picture: HTMLElement;

property pre

pre: HTMLPreElement;

property progress

progress: HTMLProgressElement;

property q

q: HTMLQuoteElement;

property rp

rp: HTMLElement;

property rt

rt: HTMLElement;

property ruby

ruby: HTMLElement;

property s

s: HTMLElement;

property samp

samp: HTMLElement;

property script

script: HTMLScriptElement;

property search

search: HTMLElement;

property section

section: HTMLElement;

property select

select: HTMLSelectElement;

property slot

slot: HTMLSlotElement;

property small

small: HTMLElement;

property source

source: HTMLSourceElement;

property span

span: HTMLSpanElement;

property strong

strong: HTMLElement;

property style

style: HTMLStyleElement;

property sub

sub: HTMLElement;

property summary

summary: HTMLElement;

property sup

sup: HTMLElement;

property table

table: HTMLTableElement;

property tbody

tbody: HTMLTableSectionElement;

property td

td: HTMLTableDataCellElement;

property template

template: HTMLTemplateElement;

property textarea

textarea: HTMLTextAreaElement;

property tfoot

tfoot: HTMLTableSectionElement;

property th

th: HTMLTableHeaderCellElement;

property thead

thead: HTMLTableSectionElement;

property time

time: HTMLTimeElement;

property title

title: HTMLTitleElement;

property tr

tr: HTMLTableRowElement;

property track

track: HTMLTrackElement;

property u

u: HTMLElement;

property ul

ul: HTMLUListElement;

property var

var: HTMLElement;

property video

video: HTMLVideoElement;

property wbr

wbr: HTMLElement;

property webview

webview: HTMLWebViewElement;

interface HydratedFeatureDefinition

interface HydratedFeatureDefinition {}

property Feature

Feature: FeatureClass<unknown>;

property isEnabled

isEnabled: (props: MotionProps) => boolean;

property MeasureLayout

MeasureLayout?: typeof MeasureLayout;

property ProjectionNode

ProjectionNode?: any;

interface HydratedFeatureDefinitions

interface HydratedFeatureDefinitions {}

property animation

animation?: HydratedFeatureDefinition;

property drag

drag?: HydratedFeatureDefinition;

property exit

exit?: HydratedFeatureDefinition;

property focus

focus?: HydratedFeatureDefinition;

property hover

hover?: HydratedFeatureDefinition;

property inView

inView?: HydratedFeatureDefinition;

property layout

layout?: HydratedFeatureDefinition;

property pan

pan?: HydratedFeatureDefinition;

property tap

tap?: HydratedFeatureDefinition;

interface IProjectionNode

interface IProjectionNode<I = unknown> {}

property animationCommitId

animationCommitId: number;

property animationId

animationId: number;

property animationValues

animationValues?: ResolvedValues;

property children

children: Set<IProjectionNode>;

property currentAnimation

currentAnimation?: JSAnimation<number>;

property depth

depth: number;

property hasCheckedOptimisedAppear

hasCheckedOptimisedAppear: boolean;

property hasTreeAnimated

hasTreeAnimated: boolean;

property id

id: number;

property instance

instance: I | undefined;

property isAnimationBlocked

isAnimationBlocked?: boolean;

property isLayoutDirty

isLayoutDirty: boolean;

property isPresent

isPresent?: boolean;

property isProjectionDirty

isProjectionDirty: boolean;

property isSharedProjectionDirty

isSharedProjectionDirty: boolean;

property isTransformDirty

isTransformDirty: boolean;

property isTreeAnimating

isTreeAnimating?: boolean;

property isTreeAnimationBlocked

isTreeAnimationBlocked: () => boolean;

property isUpdating

isUpdating: boolean;

property isVisible

isVisible: boolean;

property latestValues

latestValues: ResolvedValues;

property layout

layout?: Measurements;

property mount

mount: (node: I, isLayoutDirty?: boolean) => void;

property needsReset

needsReset: boolean;

property nodes

nodes?: FlatTree;

property options

options: ProjectionNodeOptions;

property parent

parent?: IProjectionNode;

property path

path: IProjectionNode[];

property preserveOpacity

preserveOpacity?: boolean;

property prevTransformTemplateValue

prevTransformTemplateValue: string | undefined;

property projectionDelta

projectionDelta?: Delta;

property projectionDeltaWithTransform

projectionDeltaWithTransform?: Delta;

property relativeParent

relativeParent?: IProjectionNode;

property relativeTarget

relativeTarget?: Box;

property relativeTargetOrigin

relativeTargetOrigin?: Box;

property resolvedRelativeTargetAt

resolvedRelativeTargetAt?: number;

property resumeFrom

resumeFrom?: IProjectionNode;

property resumingFrom

resumingFrom?: IProjectionNode;

property root

root?: IProjectionNode;

property scroll

scroll?: ScrollMeasurements;

property sharedNodes

sharedNodes: Map<string, NodeStack>;

property shouldResetTransform

shouldResetTransform: boolean;

property snapshot

snapshot?: Measurements;

property target

target?: Box;

property targetDelta

targetDelta?: Delta;

property targetWithTransforms

targetWithTransforms?: Box;

property treeScale

treeScale?: Point;

property unmount

unmount: () => void;

property updateBlockedByResize

updateBlockedByResize: boolean;

property updateManuallyBlocked

updateManuallyBlocked: boolean;

method addEventListener

addEventListener: (name: LayoutEvents, handler: any) => VoidFunction;

method applyProjectionStyles

applyProjectionStyles: (
    targetStyle: CSSStyleDeclaration,
    styleProp?: MotionStyle
) => void;

method applyTransform

applyTransform: (box: Box, transformOnly?: boolean) => Box;

method blockUpdate

blockUpdate: () => void;

method calcProjection

calcProjection: () => void;

method checkUpdateFailed

checkUpdateFailed: () => void;

method clearMeasurements

clearMeasurements: () => void;

method clearSnapshot

clearSnapshot: () => void;

method didUpdate

didUpdate: () => void;

method finishAnimation

finishAnimation: () => void;

method getClosestProjectingParent

getClosestProjectingParent: () => IProjectionNode | undefined;

method getStack

getStack: () => NodeStack | undefined;

method hasListeners

hasListeners: (name: LayoutEvents) => boolean;

method hide

hide: () => void;

method isLead

isLead: () => boolean;

method isProjecting

isProjecting: () => boolean;

method isUpdateBlocked

isUpdateBlocked: () => boolean;

method measure

measure: (removeTransform?: boolean) => Measurements;

method measurePageBox

measurePageBox: () => Box;

method notifyListeners

notifyListeners: (name: LayoutEvents, ...args: any) => void;

method promote

promote: (options?: {
    needsReset?: boolean;
    transition?: Transition;
    preserveFollowOpacity?: boolean;
}) => void;

method registerSharedNode

registerSharedNode: (id: string, node: IProjectionNode) => void;

method relegate

relegate: () => boolean;

method resetSkewAndRotation

resetSkewAndRotation: () => void;

method resetTransform

resetTransform: () => void;

method resetTree

resetTree: () => void;

method resolveTargetDelta

resolveTargetDelta: (force?: boolean) => void;

method scheduleCheckAfterUnmount

scheduleCheckAfterUnmount: () => void;

method scheduleRender

scheduleRender: (notifyAll?: boolean) => void;

method scheduleUpdateProjection

scheduleUpdateProjection: () => void;

method setAnimationOrigin

setAnimationOrigin: (delta: Delta) => void;

method setOptions

setOptions: (options: ProjectionNodeOptions) => void;

method setTargetDelta

setTargetDelta: (delta: Delta) => void;

method show

show: () => void;

method startAnimation

startAnimation: (transition: ValueTransition) => void;

method startUpdate

startUpdate: () => void;

method unblockUpdate

unblockUpdate: () => void;

method updateLayout

updateLayout: () => void;

method updateScroll

updateScroll: (phase?: Phase) => void;

method updateSnapshot

updateSnapshot: () => void;

method willUpdate

willUpdate: (notifyListeners?: boolean) => void;

interface LazyProps

interface LazyProps {}

Modifiers
- @public

property children

children?: React.ReactNode;

property features

features: FeatureBundle | LazyFeatureBundle;

Can be used to provide a feature bundle synchronously or asynchronously.

// features.js
import { domAnimation } from "framer-motion"
export default domAnimation

// index.js
import { LazyMotion, m } from "framer-motion"

const loadFeatures = () =>import("./features.js")
  .then(res => res.default)

function Component() {
  return (
    <LazyMotion features={loadFeatures}>
      <m.div animate={{ scale: 1.5 }} />
    </LazyMotion>
  )
}

Modifiers

@public

property strict

strict?: boolean;

If true, will throw an error if a motion component renders within a LazyMotion component.

// This component will throw an error that explains using a motion component
// instead of the m component will break the benefits of code-splitting.
function Component() {
  return (
    <LazyMotion features={domAnimation} strict>
      <motion.div />
    </LazyMotion>
  )
}

Modifiers

@public

interface MotionConfigContext

interface MotionConfigContext {}

Modifiers
- @public

property isStatic

isStatic: boolean;

Internal. Determines whether this is a static context ie the Framer canvas. If so, it'll disable all dynamic functionality.

property nonce

nonce?: string;

A custom nonce attribute used when wanting to enforce a Content Security Policy (CSP). For more details see: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#unsafe_inline_styles
Modifiers
- @public

property reducedMotion

reducedMotion?: ReducedMotionConfig;

If true, will respect the device prefersReducedMotion setting by switching transform animations off.
Modifiers
- @public

property transformPagePoint

transformPagePoint: TransformPoint;

Internal, exported only for usage in Framer

property transition

transition?: Transition;

Defines a new default transition for the entire tree.
Modifiers
- @public

interface MotionConfigProps

interface MotionConfigProps extends Partial<MotionConfigContext> {}

property children

children?: React$1.ReactNode;

property isValidProp

isValidProp?: IsValidProp;

interface MotionProps

interface MotionProps extends MotionNodeOptions {}

Props for motion components.
Modifiers
- @public

property children

children?: React.ReactNode | MotionValueNumber | MotionValueString;

property style

style?: MotionStyle;

The React DOM style prop, enhanced with support for MotionValues and separate transform values.

export const MyComponent = () => {
  const x = useMotionValue(0)

  return <motion.div style={{ x, opacity: 1, scale: 0.5 }} />
}

interface MotionStyle

interface MotionStyle extends MotionCSS, MotionTransform, MotionSVGProps {}

Modifiers
- @public

interface ResolvedValues

interface ResolvedValues {}

A generic set of string/number values

index signature

[key: string]: AnyResolvedKeyframe;

interface ScrollMotionValues

interface ScrollMotionValues {}

Modifiers
- @public

property scrollX

scrollX: MotionValue<number>;

property scrollXProgress

scrollXProgress: MotionValue<number>;

property scrollY

scrollY: MotionValue<number>;

property scrollYProgress

scrollYProgress: MotionValue<number>;

interface SequenceLabelWithTime

interface SequenceLabelWithTime {}

property at

at: SequenceTime;

property name

name: SequenceLabel;

interface SequenceMap

interface SequenceMap {}

index signature

[key: string]: ValueSequence;

interface SequenceOptions

interface SequenceOptions extends AnimationPlaybackOptions {}

property defaultTransition

defaultTransition?: Transition;

property delay

delay?: number;

property duration

duration?: number;

interface SVGMotionProps

interface SVGMotionProps<T> extends SVGAttributesAsMotionValues<T>, MotionProps {}

Modifiers
- @public

interface UseInViewOptions

interface UseInViewOptions extends Omit<InViewOptions, 'root' | 'amount'> {}

property amount

amount?: 'some' | 'all' | number;

property initial

initial?: boolean;

property once

once?: boolean;

property root

root?: RefObject<Element | null>;

interface UseScrollOptions

interface UseScrollOptions extends Omit<ScrollInfoOptions, 'container' | 'target'> {}

property container

container?: RefObject<HTMLElement | null>;

property target

target?: RefObject<HTMLElement | null>;

interface VisualState

interface VisualState<Instance, RenderState> {}

property latestValues

latestValues: ResolvedValues;

property onMount

onMount?: (instance: Instance) => void;

property renderState

renderState: RenderState;

Type Aliases

type AnimationSequence

type AnimationSequence = Segment[];

type AnimationType

type AnimationType =
    | 'animate'
    | 'whileHover'
    | 'whileTap'
    | 'whileDrag'
    | 'whileFocus'
    | 'whileInView'
    | 'exit';

type CreateVisualElement

type CreateVisualElement<
    Props = {},
    TagName extends keyof DOMMotionComponents | string = 'div'
> = (
    Component: TagName | string | React.ComponentType<Props>,
    options: VisualElementOptions<HTMLElement | SVGElement>
) => VisualElement<HTMLElement | SVGElement>;

type Cycle

type Cycle = (i?: number) => void;

type CycleState

type CycleState<T> = [T, Cycle];

type DelayedFunction

type DelayedFunction = (overshoot: number) => void;

type DOMMotionComponents

type DOMMotionComponents = HTMLMotionComponents & SVGMotionComponents;

type DOMSegment

type DOMSegment = [ElementOrSelector, DOMKeyframesDefinition];

type DOMSegmentWithTransition

type DOMSegmentWithTransition = [
    ElementOrSelector,
    DOMKeyframesDefinition,
    AnimationOptions & At
];

type FeatureDefinitions

type FeatureDefinitions = {
    [K in keyof HydratedFeatureDefinitions]: FeatureDefinition;
};

type FeaturePackages

type FeaturePackages = {
    [K in keyof HydratedFeatureDefinitions]: FeaturePackage;
};

type ForwardRefComponent

type ForwardRefComponent<T, P> = {
    readonly $$typeof: symbol;
} & ((props: PropsWithoutRef<P> & RefAttributes<T>) => JSX.Element);

Modifiers
- @public

type HTMLMotionProps

type HTMLMotionProps<Tag extends keyof HTMLElements> = AttributesWithoutMotionProps<
    JSX.IntrinsicElements[Tag]
> &
    MotionProps;

Modifiers
- @public

type LazyFeatureBundle

type LazyFeatureBundle$1 = () => Promise<FeatureBundle>;

type MotionTransform

type MotionTransform = MakeMotion<TransformProperties>;

Modifiers
- @public

type MotionValueSegment

type MotionValueSegment = [
    MotionValue,
    UnresolvedValueKeyframe | UnresolvedValueKeyframe[]
];

type MotionValueSegmentWithTransition

type MotionValueSegmentWithTransition = [
    MotionValue,
    UnresolvedValueKeyframe | UnresolvedValueKeyframe[],
    Transition & At
];

type ObjectSegment

type ObjectSegment<O extends {} = {}> = [O, ObjectTarget<O>];

type ObjectSegmentWithTransition

type ObjectSegmentWithTransition<O extends {} = {}> = [
    O,
    ObjectTarget<O>,
    AnimationOptions & At
];

type ObjectTarget

type ObjectTarget<O> = {
    [K in keyof O]?: O[K] | UnresolvedValueKeyframe[];
};

type ResolvedAnimationDefinition

type ResolvedAnimationDefinition = {
    keyframes: {
        [key: string]: UnresolvedValueKeyframe[];
    };
    transition: {
        [key: string]: Transition;
    };
};

type ResolvedAnimationDefinitions

type ResolvedAnimationDefinitions = Map<
    Element | MotionValue,
    ResolvedAnimationDefinition
>;

type ResolveKeyframes

type ResolveKeyframes<V extends AnyResolvedKeyframe> = (
    keyframes: V[],
    onComplete: OnKeyframesResolved<V>,
    name?: string,
    motionValue?: any
) => KeyframeResolver<V>;

type ScrapeMotionValuesFromProps

type ScrapeMotionValuesFromProps = (
    props: MotionProps,
    prevProps: MotionProps,
    visualElement?: VisualElement
) => {
    [key: string]: MotionValue | AnyResolvedKeyframe;
};

type Segment

type Segment =
    | ObjectSegment
    | ObjectSegmentWithTransition
    | SequenceLabel
    | SequenceLabelWithTime
    | MotionValueSegment
    | MotionValueSegmentWithTransition
    | DOMSegment
    | DOMSegmentWithTransition;

type SequenceLabel

type SequenceLabel = string;

type SequenceTime

type SequenceTime = number | '<' | `+${number}` | `-${number}` | `${string}`;

type SVGAttributesAsMotionValues

type SVGAttributesAsMotionValues<T> = MakeMotion<SVGAttributesWithoutMotionProps<T>>;

Blanket-accept any SVG attribute as a MotionValue
Modifiers
- @public

type SwitchLayoutGroupContext

type SwitchLayoutGroupContext = SwitchLayoutGroup & InitialPromotionConfig;

type ValueSequence

type ValueSequence = AbsoluteKeyframe[];

type VariantLabels

type VariantLabels = string | string[];

Either a string, or array of strings, that reference variants defined via the variants prop.
Modifiers
- @public

Namespaces

namespace Reorder

namespace Reorder {}

function Group

Group: <V, TagName extends keyof HTMLElements = 'ul'>(props: any) => JSX.Element;

function Item

Item: <V, TagName extends keyof HTMLElements = 'li'>(props: any) => JSX.Element;

Package Files (2)

Dependencies (3)

Dev Dependencies (3)

Peer Dependencies (3)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/framer-motion.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/framer-motion)

HTML

<a href="https://www.jsdocs.io/package/framer-motion"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 6 days ago.
Package analyzed in 8807 ms.
Missing or incorrect documentation? Open an issue for this package.

framer-motion

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Namespaces

Variables

variable animate

variable AnimateSharedLayout

variable animations

variable DeprecatedLayoutGroupContext

Deprecated

variable domAnimation

Modifiers

variable domMax

Modifiers

variable domMin

Modifiers

variable isBrowser

variable LayoutGroup

variable LayoutGroupContext

variable m

variable motion

variable MotionConfigContext

Modifiers

variable MotionContext

variable optimizedAppearDataAttribute

variable PresenceContext

Modifiers

variable SwitchLayoutGroupContext

variable useAnimation

variable useIsomorphicLayoutEffect

variable visualElementStore

Functions

function addPointerEvent

function addPointerInfo

function addScaleCorrector

function animateMini

function AnimatePresence

Modifiers

function animateVisualElement

function animationControls

Modifiers

function buildTransform

function calcLength

function createBox

function createMotionComponent

function createScopedAnimate

function delay

function disableInstantTransitions

function distance

function distance2D

function filterProps

function inView

function isMotionComponent

function isValidMotionProp

Parameter key

Returns

Modifiers

function LazyMotion

Modifiers

function makeUseVisualState

function MeasureLayout

function MotionConfig

Modifiers

function PopChild

function PresenceChild

function ReorderGroup

function ReorderGroupComponent

function ReorderItem

function ReorderItemComponent

function resolveMotionValue

function scroll

function scrollInfo

function startOptimizedAppearAnimation

function unwrapMotionComponent