framer-motion

framer-motion

Version 12.26.2
Published 1 day ago
4.38 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, type }?: 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, type }?: 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 PresenceContext

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

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;

Functions

function addPointerEvent

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

function addPointerInfo

addPointerInfo: (handler: EventListenerWithPointInfo) => EventListener;

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 animationControls

animationControls: () => LegacyAnimationControls;

Modifiers
- @public

function createMotionComponent

createMotionComponent: <Props, TagName extends string = 'div'>(
    Component: TagName | string | React$1.ComponentType<Props>,
    { forwardMotionProps, type }?: 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 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
) => React$1.JSX.Element;

function ReorderItemComponent

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

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: {
    <T extends Record<string, any[]>>(
        inputValue: MotionValue<number>,
        inputRange: InputRange,
        outputMap: T,
        options?: TransformOptions<T[keyof T][number]>
    ): { [K in keyof T]: MotionValue<T[K][number]> };
    <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 multiple MotionValues that transform the output of another MotionValue by mapping it from one range of values into multiple output ranges.
Parameter inputValue
MotionValue
Parameter inputRange
A linear series of numbers (either all increasing or decreasing)
Parameter outputMap
An object where keys map to output ranges. Each output range must be the same length as inputRange.
Parameter options
Transform options applied to all outputs
Returns
An object with the same keys as outputMap, where each value is a MotionValue
Remarks
This is useful when you want to derive multiple values from a single input value. The keys of the output map must remain constant across renders.
export const MyComponent = () => { const x = useMotionValue(0) const { opacity, scale } = useTransform(x, [0, 100], { opacity: [0, 1], scale: [0.5, 1] }) return ( <motion.div style={{ opacity, scale, x }} /> ) }
Modifiers
- @public
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 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 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 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 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
) => React$1.JSX.Element;

Package Files (2)

Dependencies (3)

Dev Dependencies (4)

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 just now.
Package analyzed in 5824 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 PresenceContext

Modifiers

variable SwitchLayoutGroupContext

variable useAnimation

variable useIsomorphicLayoutEffect

Functions

function addPointerEvent

function addPointerInfo

function animateMini

function AnimatePresence

Modifiers

function animationControls

Modifiers

function createMotionComponent

function createScopedAnimate

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 scroll

function scrollInfo

function startOptimizedAppearAnimation

function unwrapMotionComponent

function useAnimate

function useAnimateMini

function useAnimationControls

Returns

Modifiers

function useAnimationFrame

function useComposedRefs

function useCycle

Parameter items