framer-motion

framer-motion

Version 11.11.8
Published 3 days ago
3.02 MB
1 dependency
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
    ): AnimationPlaybackControls;
    (
        value: string | MotionValue<string>,
        keyframes: string | GenericKeyframesTarget<string>,
        options?: ValueAnimationTransition<string>
    ): AnimationPlaybackControls;
    (
        value: number | MotionValue<number>,
        keyframes: number | GenericKeyframesTarget<number>,
        options?: ValueAnimationTransition<number>
    ): AnimationPlaybackControls;
    <V>(
        value: V | MotionValue<V>,
        keyframes: V | V[],
        options?: ValueAnimationTransition<V>
    ): AnimationPlaybackControls;
    (
        element: ElementOrSelector,
        keyframes: DOMKeyframesDefinition,
        options?: DynamicAnimationOptions
    ): AnimationPlaybackControls;
    <O extends {}>(
        object: O | O[],
        keyframes: ObjectTarget<O>,
        options?: DynamicAnimationOptions
    ): AnimationPlaybackControls;
};

variable AnimatePresence

const AnimatePresence: React$1.FunctionComponent<
    React$1.PropsWithChildren<AnimatePresenceProps>
>;

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

variable AnimateSharedLayout

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

variable animations

const animations: FeaturePackages;

variable backIn

const backIn: EasingFunction;

variable backInOut

const backInOut: EasingFunction;

variable cancelSync

const cancelSync: Record<string, (process: Process) => void>;

Deprecated
Use cancelFrame(callback) instead.

variable circIn

const circIn: EasingFunction;

variable circInOut

const circInOut: EasingFunction;

variable circOut

const circOut: EasingFunction;

variable color

const color: {
    test: (v: any) => boolean;
    parse: (v: any) => RGBA | HSLA;
    transform: (v: HSLA | RGBA | string) => string;
};

variable complex

const complex: {
    test: typeof test;
    parse: typeof parseComplexValue;
    createTransformer: typeof createTransformer;
    getAnimatableNone: typeof getAnimatableNone;
};

variable DeprecatedLayoutGroupContext

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

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

variable domMax

const domMax: FeatureBundle;

Modifiers
- @public

variable domMin

const domMin: FeatureBundle;

Modifiers
- @public

variable frame

const frame: Batcher;

variable frameData

const frameData: FrameData;

variable frameSteps

const frameSteps: Steps;

variable htmlElements

const htmlElements: readonly [
    'a',
    'abbr',
    'address',
    'area',
    'article',
    'aside',
    'audio',
    'b',
    'base',
    'bdi',
    'bdo',
    'big',
    'blockquote',
    'body',
    'br',
    'button',
    'canvas',
    'caption',
    'cite',
    'code',
    'col',
    'colgroup',
    'data',
    'datalist',
    'dd',
    'del',
    'details',
    'dfn',
    'dialog',
    'div',
    'dl',
    'dt',
    'em',
    'embed',
    'fieldset',
    'figcaption',
    'figure',
    'footer',
    'form',
    'h1',
    'h2',
    'h3',
    'h4',
    'h5',
    'h6',
    'head',
    'header',
    'hgroup',
    'hr',
    'html',
    'i',
    'iframe',
    'img',
    'input',
    'ins',
    'kbd',
    'keygen',
    'label',
    'legend',
    'li',
    'link',
    'main',
    'map',
    'mark',
    'menu',
    'menuitem',
    'meta',
    'meter',
    'nav',
    'noscript',
    'object',
    'ol',
    'optgroup',
    'option',
    'output',
    'p',
    'param',
    'picture',
    'pre',
    'progress',
    'q',
    'rp',
    'rt',
    'ruby',
    's',
    'samp',
    'script',
    'section',
    'select',
    'small',
    'source',
    'span',
    'strong',
    'style',
    'sub',
    'summary',
    'sup',
    'table',
    'tbody',
    'td',
    'textarea',
    'tfoot',
    'th',
    'thead',
    'time',
    'title',
    'tr',
    'track',
    'u',
    'ul',
    'var',
    'video',
    'wbr',
    'webview'
];

variable invariant

let invariant: DevMessage;

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 }?: { forwardMotionProps: boolean }
) => TagName extends
    | 'symbol'
    | 'object'
    | 'image'
    | 'style'
    | 'animate'
    | 'clipPath'
    | 'filter'
    | 'marker'
    | 'mask'
    | 'path'
    | 'a'
    | 'abbr'
    | 'address'
    | 'area'
    | 'article'
    | 'aside'
    | 'audio'
    | 'b'
    | 'base'
    | 'bdi'
    | 'bdo'
    | 'big'
    | 'blockquote'
    | 'body'
    | 'br'
    | 'button'
    | 'canvas'
    | 'caption'
    | 'cite'
    | 'code'
    | 'col'
    | 'colgroup'
    | 'data'
    | 'datalist'
    | 'dd'
    | 'del'
    | 'details'
    | 'dfn'
    | 'dialog'
    | 'div'
    | 'dl'
    | 'dt'
    | 'em'
    | 'embed'
    | 'fieldset'
    | 'figcaption'
    | 'figure'
    | 'footer'
    | 'form'
    | 'h1'
    | 'h2'
    | 'h3'
    | 'h4'
    | 'h5'
    | 'h6'
    | 'head'
    | 'header'
    | 'hgroup'
    | 'hr'
    | 'html'
    | 'i'
    | 'iframe'
    | 'img'
    | 'input'
    | 'ins'
    | 'kbd'
    | 'keygen'
    | 'label'
    | 'legend'
    | 'li'
    | 'link'
    | 'main'
    | 'map'
    | 'mark'
    | 'menu'
    | 'menuitem'
    | 'meta'
    | 'meter'
    | 'nav'
    | 'noscript'
    | 'ol'
    | 'optgroup'
    | 'option'
    | 'output'
    | 'p'
    | 'param'
    | 'picture'
    | 'pre'
    | 'progress'
    | 'q'
    | 'rp'
    | 'rt'
    | 'ruby'
    | 's'
    | 'samp'
    | 'script'
    | 'section'
    | 'select'
    | 'small'
    | 'source'
    | 'span'
    | 'strong'
    | 'sub'
    | 'summary'
    | 'sup'
    | 'table'
    | 'tbody'
    | 'td'
    | 'textarea'
    | 'tfoot'
    | 'th'
    | 'thead'
    | 'time'
    | 'title'
    | 'tr'
    | 'track'
    | 'u'
    | 'ul'
    | 'var'
    | 'video'
    | 'wbr'
    | 'webview'
    | 'circle'
    | 'defs'
    | 'desc'
    | 'ellipse'
    | 'g'
    | 'line'
    | 'metadata'
    | 'pattern'
    | 'polygon'
    | 'polyline'
    | 'rect'
    | 'stop'
    | 'svg'
    | 'switch'
    | 'text'
    | 'tspan'
    | 'use'
    | 'view'
    | 'feBlend'
    | 'feColorMatrix'
    | 'feComponentTransfer'
    | 'feComposite'
    | 'feConvolveMatrix'
    | 'feDiffuseLighting'
    | 'feDisplacementMap'
    | 'feDistantLight'
    | 'feDropShadow'
    | 'feFlood'
    | 'feFuncA'
    | 'feFuncB'
    | 'feFuncG'
    | 'feFuncR'
    | 'feGaussianBlur'
    | 'feImage'
    | 'feMerge'
    | 'feMergeNode'
    | 'feMorphology'
    | 'feOffset'
    | 'fePointLight'
    | 'feSpecularLighting'
    | 'feSpotLight'
    | 'feTile'
    | 'feTurbulence'
    | 'foreignObject'
    | 'linearGradient'
    | 'radialGradient'
    | 'textPath'
    ? DOMMotionComponents[TagName]
    : React$1.ForwardRefExoticComponent<
          MotionComponentProps<React$1.PropsWithChildren<Props>>
      >) &
    HTMLMotionComponents &
    SVGMotionComponents & {
        create: <Props, TagName extends string = 'div'>(
            Component: any,
            { forwardMotionProps }?: { forwardMotionProps: boolean }
        ) => TagName extends
            | 'symbol'
            | 'object'
            | 'image'
            | 'style'
            | 'animate'
            | 'clipPath'
            | 'filter'
            | 'marker'
            | 'mask'
            | 'path'
            | 'a'
            | 'abbr'
            | 'address'
            | 'area'
            | 'article'
            | 'aside'
            | 'audio'
            | 'b'
            | 'base'
            | 'bdi'
            | 'bdo'
            | 'big'
            | 'blockquote'
            | 'body'
            | 'br'
            | 'button'
            | 'canvas'
            | 'caption'
            | 'cite'
            | 'code'
            | 'col'
            | 'colgroup'
            | 'data'
            | 'datalist'
            | 'dd'
            | 'del'
            | 'details'
            | 'dfn'
            | 'dialog'
            | 'div'
            | 'dl'
            | 'dt'
            | 'em'
            | 'embed'
            | 'fieldset'
            | 'figcaption'
            | 'figure'
            | 'footer'
            | 'form'
            | 'h1'
            | 'h2'
            | 'h3'
            | 'h4'
            | 'h5'
            | 'h6'
            | 'head'
            | 'header'
            | 'hgroup'
            | 'hr'
            | 'html'
            | 'i'
            | 'iframe'
            | 'img'
            | 'input'
            | 'ins'
            | 'kbd'
            | 'keygen'
            | 'label'
            | 'legend'
            | 'li'
            | 'link'
            | 'main'
            | 'map'
            | 'mark'
            | 'menu'
            | 'menuitem'
            | 'meta'
            | 'meter'
            | 'nav'
            | 'noscript'
            | 'ol'
            | 'optgroup'
            | 'option'
            | 'output'
            | 'p'
            | 'param'
            | 'picture'
            | 'pre'
            | 'progress'
            | 'q'
            | 'rp'
            | 'rt'
            | 'ruby'
            | 's'
            | 'samp'
            | 'script'
            | 'section'
            | 'select'
            | 'small'
            | 'source'
            | 'span'
            | 'strong'
            | 'sub'
            | 'summary'
            | 'sup'
            | 'table'
            | 'tbody'
            | 'td'
            | 'textarea'
            | 'tfoot'
            | 'th'
            | 'thead'
            | 'time'
            | 'title'
            | 'tr'
            | 'track'
            | 'u'
            | 'ul'
            | 'var'
            | 'video'
            | 'wbr'
            | 'webview'
            | 'circle'
            | 'defs'
            | 'desc'
            | 'ellipse'
            | 'g'
            | 'line'
            | 'metadata'
            | 'pattern'
            | 'polygon'
            | 'polyline'
            | 'rect'
            | 'stop'
            | 'svg'
            | 'switch'
            | 'text'
            | 'tspan'
            | 'use'
            | 'view'
            | 'feBlend'
            | 'feColorMatrix'
            | 'feComponentTransfer'
            | 'feComposite'
            | 'feConvolveMatrix'
            | 'feDiffuseLighting'
            | 'feDisplacementMap'
            | 'feDistantLight'
            | 'feDropShadow'
            | 'feFlood'
            | 'feFuncA'
            | 'feFuncB'
            | 'feFuncG'
            | 'feFuncR'
            | 'feGaussianBlur'
            | 'feImage'
            | 'feMerge'
            | 'feMergeNode'
            | 'feMorphology'
            | 'feOffset'
            | 'fePointLight'
            | 'feSpecularLighting'
            | 'feSpotLight'
            | 'feTile'
            | 'feTurbulence'
            | 'foreignObject'
            | 'linearGradient'
            | 'radialGradient'
            | 'textPath'
            ? DOMMotionComponents[TagName]
            : React$1.ForwardRefExoticComponent<
                  MotionComponentProps<React$1.PropsWithChildren<Props>>
              >;
    };

variable mirrorEasing

const mirrorEasing: EasingModifier;

variable motion

const motion: (<Props, TagName extends string = 'div'>(
    Component: any,
    { forwardMotionProps }?: { forwardMotionProps: boolean }
) => TagName extends
    | 'symbol'
    | 'object'
    | 'image'
    | 'style'
    | 'animate'
    | 'clipPath'
    | 'filter'
    | 'marker'
    | 'mask'
    | 'path'
    | 'a'
    | 'abbr'
    | 'address'
    | 'area'
    | 'article'
    | 'aside'
    | 'audio'
    | 'b'
    | 'base'
    | 'bdi'
    | 'bdo'
    | 'big'
    | 'blockquote'
    | 'body'
    | 'br'
    | 'button'
    | 'canvas'
    | 'caption'
    | 'cite'
    | 'code'
    | 'col'
    | 'colgroup'
    | 'data'
    | 'datalist'
    | 'dd'
    | 'del'
    | 'details'
    | 'dfn'
    | 'dialog'
    | 'div'
    | 'dl'
    | 'dt'
    | 'em'
    | 'embed'
    | 'fieldset'
    | 'figcaption'
    | 'figure'
    | 'footer'
    | 'form'
    | 'h1'
    | 'h2'
    | 'h3'
    | 'h4'
    | 'h5'
    | 'h6'
    | 'head'
    | 'header'
    | 'hgroup'
    | 'hr'
    | 'html'
    | 'i'
    | 'iframe'
    | 'img'
    | 'input'
    | 'ins'
    | 'kbd'
    | 'keygen'
    | 'label'
    | 'legend'
    | 'li'
    | 'link'
    | 'main'
    | 'map'
    | 'mark'
    | 'menu'
    | 'menuitem'
    | 'meta'
    | 'meter'
    | 'nav'
    | 'noscript'
    | 'ol'
    | 'optgroup'
    | 'option'
    | 'output'
    | 'p'
    | 'param'
    | 'picture'
    | 'pre'
    | 'progress'
    | 'q'
    | 'rp'
    | 'rt'
    | 'ruby'
    | 's'
    | 'samp'
    | 'script'
    | 'section'
    | 'select'
    | 'small'
    | 'source'
    | 'span'
    | 'strong'
    | 'sub'
    | 'summary'
    | 'sup'
    | 'table'
    | 'tbody'
    | 'td'
    | 'textarea'
    | 'tfoot'
    | 'th'
    | 'thead'
    | 'time'
    | 'title'
    | 'tr'
    | 'track'
    | 'u'
    | 'ul'
    | 'var'
    | 'video'
    | 'wbr'
    | 'webview'
    | 'circle'
    | 'defs'
    | 'desc'
    | 'ellipse'
    | 'g'
    | 'line'
    | 'metadata'
    | 'pattern'
    | 'polygon'
    | 'polyline'
    | 'rect'
    | 'stop'
    | 'svg'
    | 'switch'
    | 'text'
    | 'tspan'
    | 'use'
    | 'view'
    | 'feBlend'
    | 'feColorMatrix'
    | 'feComponentTransfer'
    | 'feComposite'
    | 'feConvolveMatrix'
    | 'feDiffuseLighting'
    | 'feDisplacementMap'
    | 'feDistantLight'
    | 'feDropShadow'
    | 'feFlood'
    | 'feFuncA'
    | 'feFuncB'
    | 'feFuncG'
    | 'feFuncR'
    | 'feGaussianBlur'
    | 'feImage'
    | 'feMerge'
    | 'feMergeNode'
    | 'feMorphology'
    | 'feOffset'
    | 'fePointLight'
    | 'feSpecularLighting'
    | 'feSpotLight'
    | 'feTile'
    | 'feTurbulence'
    | 'foreignObject'
    | 'linearGradient'
    | 'radialGradient'
    | 'textPath'
    ? DOMMotionComponents[TagName]
    : React$1.ForwardRefExoticComponent<
          MotionComponentProps<React$1.PropsWithChildren<Props>>
      >) &
    HTMLMotionComponents &
    SVGMotionComponents & {
        create: <Props, TagName extends string = 'div'>(
            Component: any,
            { forwardMotionProps }?: { forwardMotionProps: boolean }
        ) => TagName extends
            | 'symbol'
            | 'object'
            | 'image'
            | 'style'
            | 'animate'
            | 'clipPath'
            | 'filter'
            | 'marker'
            | 'mask'
            | 'path'
            | 'a'
            | 'abbr'
            | 'address'
            | 'area'
            | 'article'
            | 'aside'
            | 'audio'
            | 'b'
            | 'base'
            | 'bdi'
            | 'bdo'
            | 'big'
            | 'blockquote'
            | 'body'
            | 'br'
            | 'button'
            | 'canvas'
            | 'caption'
            | 'cite'
            | 'code'
            | 'col'
            | 'colgroup'
            | 'data'
            | 'datalist'
            | 'dd'
            | 'del'
            | 'details'
            | 'dfn'
            | 'dialog'
            | 'div'
            | 'dl'
            | 'dt'
            | 'em'
            | 'embed'
            | 'fieldset'
            | 'figcaption'
            | 'figure'
            | 'footer'
            | 'form'
            | 'h1'
            | 'h2'
            | 'h3'
            | 'h4'
            | 'h5'
            | 'h6'
            | 'head'
            | 'header'
            | 'hgroup'
            | 'hr'
            | 'html'
            | 'i'
            | 'iframe'
            | 'img'
            | 'input'
            | 'ins'
            | 'kbd'
            | 'keygen'
            | 'label'
            | 'legend'
            | 'li'
            | 'link'
            | 'main'
            | 'map'
            | 'mark'
            | 'menu'
            | 'menuitem'
            | 'meta'
            | 'meter'
            | 'nav'
            | 'noscript'
            | 'ol'
            | 'optgroup'
            | 'option'
            | 'output'
            | 'p'
            | 'param'
            | 'picture'
            | 'pre'
            | 'progress'
            | 'q'
            | 'rp'
            | 'rt'
            | 'ruby'
            | 's'
            | 'samp'
            | 'script'
            | 'section'
            | 'select'
            | 'small'
            | 'source'
            | 'span'
            | 'strong'
            | 'sub'
            | 'summary'
            | 'sup'
            | 'table'
            | 'tbody'
            | 'td'
            | 'textarea'
            | 'tfoot'
            | 'th'
            | 'thead'
            | 'time'
            | 'title'
            | 'tr'
            | 'track'
            | 'u'
            | 'ul'
            | 'var'
            | 'video'
            | 'wbr'
            | 'webview'
            | 'circle'
            | 'defs'
            | 'desc'
            | 'ellipse'
            | 'g'
            | 'line'
            | 'metadata'
            | 'pattern'
            | 'polygon'
            | 'polyline'
            | 'rect'
            | 'stop'
            | 'svg'
            | 'switch'
            | 'text'
            | 'tspan'
            | 'use'
            | 'view'
            | 'feBlend'
            | 'feColorMatrix'
            | 'feComponentTransfer'
            | 'feComposite'
            | 'feConvolveMatrix'
            | 'feDiffuseLighting'
            | 'feDisplacementMap'
            | 'feDistantLight'
            | 'feDropShadow'
            | 'feFlood'
            | 'feFuncA'
            | 'feFuncB'
            | 'feFuncG'
            | 'feFuncR'
            | 'feGaussianBlur'
            | 'feImage'
            | 'feMerge'
            | 'feMergeNode'
            | 'feMorphology'
            | 'feOffset'
            | 'fePointLight'
            | 'feSpecularLighting'
            | 'feSpotLight'
            | 'feTile'
            | 'feTurbulence'
            | 'foreignObject'
            | 'linearGradient'
            | 'radialGradient'
            | 'textPath'
            ? DOMMotionComponents[TagName]
            : React$1.ForwardRefExoticComponent<
                  MotionComponentProps<React$1.PropsWithChildren<Props>>
              >;
    };

variable MotionContext

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

variable MotionGlobalConfig

const MotionGlobalConfig: { skipAnimations: boolean; useManualTiming: boolean };

variable optimizedAppearDataAttribute

const optimizedAppearDataAttribute: string;

variable px

const px: {
    test: (v: string | number) => boolean;
    parse: typeof parseFloat;
    transform: (v: number | string) => string;
};

variable reverseEasing

const reverseEasing: EasingModifier;

variable svgElements

const svgElements: readonly [
    'animate',
    'circle',
    'defs',
    'desc',
    'ellipse',
    'g',
    'image',
    'line',
    'filter',
    'marker',
    'mask',
    'metadata',
    'path',
    'pattern',
    'polygon',
    'polyline',
    'rect',
    'stop',
    'svg',
    'switch',
    'symbol',
    'text',
    'tspan',
    'use',
    'view',
    'clipPath',
    'feBlend',
    'feColorMatrix',
    'feComponentTransfer',
    'feComposite',
    'feConvolveMatrix',
    'feDiffuseLighting',
    'feDisplacementMap',
    'feDistantLight',
    'feDropShadow',
    'feFlood',
    'feFuncA',
    'feFuncB',
    'feFuncG',
    'feFuncR',
    'feGaussianBlur',
    'feImage',
    'feMerge',
    'feMergeNode',
    'feMorphology',
    'feOffset',
    'fePointLight',
    'feSpecularLighting',
    'feSpotLight',
    'feTile',
    'feTurbulence',
    'foreignObject',
    'linearGradient',
    'radialGradient',
    'textPath'
];

variable SwitchLayoutGroupContext

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

Internal, exported only for usage in Framer

variable sync

const sync: Batcher;

Deprecated
Import as frame instead.

variable useAnimation

const useAnimation: () => AnimationControls;

variable useIsomorphicLayoutEffect

const useIsomorphicLayoutEffect: any;

variable visualElementStore

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

variable warning

let warning: DevMessage;

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?: DynamicAnimationOptions
) => GroupPlaybackControls;

function animateValue

animateValue: (
    options: ValueAnimationOptionsWithRenderContext<any>
) => MainThreadAnimation<any>;

function animateVisualElement

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

function anticipate

anticipate: (p: number) => number;

function backOut

backOut: (t: number) => number;

function buildTransform

buildTransform: (
    latestValues: ResolvedValues,
    transform: HTMLRenderState['transform'],
    transformTemplate?: MotionProps['transformTemplate']
) => 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 cancelFrame

cancelFrame: (process: Process) => void;

function clamp

clamp: (min: number, max: number, v: number) => number;

function createBox

createBox: () => Box;

function createRendererMotionComponent

createRendererMotionComponent: <Props extends {}, Instance, RenderState>({
    preloadedFeatures,
    createVisualElement,
    useRender,
    useVisualState,
    Component,
}: MotionComponentConfig<
    Instance,
    RenderState
>) => React$1.ForwardRefExoticComponent<React$1.RefAttributes<unknown>>;

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
    ): AnimationPlaybackControls;
    (
        value: string | MotionValue<string>,
        keyframes: string | GenericKeyframesTarget<string>,
        options?: ValueAnimationTransition<string>
    ): AnimationPlaybackControls;
    (
        value: number | MotionValue<number>,
        keyframes: number | GenericKeyframesTarget<number>,
        options?: ValueAnimationTransition<number>
    ): AnimationPlaybackControls;
    <V>(
        value: V | MotionValue<V>,
        keyframes: V | V[],
        options?: ValueAnimationTransition<V>
    ): AnimationPlaybackControls;
    (
        element: ElementOrSelector,
        keyframes: DOMKeyframesDefinition,
        options?: DynamicAnimationOptions
    ): AnimationPlaybackControls;
    <O extends {}>(
        object: O | O[],
        keyframes: ObjectTarget<O>,
        options?: DynamicAnimationOptions
    ): AnimationPlaybackControls;
};

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

function createTransformer

createTransformer: (
    source: string | number
) => (v: Array<CSSVariableToken | Color | number | string>) => string;

function cubicBezier

cubicBezier: (
    mX1: number,
    mY1: number,
    mX2: number,
    mY2: number
) => (t: number) => number;

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 easeIn

easeIn: (t: number) => number;

function easeInOut

easeInOut: (t: number) => number;

function easeOut

easeOut: (t: number) => number;

function filterProps

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

function findSpring

findSpring: ({ duration, bounce, velocity, mass }: SpringOptions) => {
    stiffness: number;
    damping: number;
    duration: number;
};

function getAnimatableNone

getAnimatableNone: (v: string | number) => string;

function inertia

inertia: ({
    keyframes,
    velocity,
    power,
    timeConstant,
    bounceDamping,
    bounceStiffness,
    modifyTarget,
    min,
    max,
    restDelta,
    restSpeed,
}: ValueAnimationOptions<number>) => KeyframeGenerator<number>;

function interpolate

interpolate: <T>(
    input: number[],
    output: T[],
    { clamp: isClamp, ease, mixer }?: InterpolateOptions<T>
) => (v: number) => T;

Create a function that maps from a numerical input array to a generic output array.
Accepts: - Numbers - Colors (hex, hsl, hsla, rgb, rgba) - Complex (combinations of one or more numbers or strings)
const mixColor = interpolate([0, 1], ['#fff', '#000']) mixColor(0.5) // 'rgba(128, 128, 128, 1)'
TODO Revist this approach once we've moved to data models for values, probably not needed to pregenerate mixer functions.
Modifiers
- @public

function inView

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

function isDragActive

isDragActive: () => boolean;

function isMotionComponent

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

Checks if a component is a motion component.

function isMotionValue

isMotionValue: (value: any) => value is MotionValue<any>;

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 keyframes

keyframes: <T extends string | number>({
    duration,
    keyframes: keyframeValues,
    times,
    ease,
}: ValueAnimationOptions<T>) => KeyframeGenerator<T>;

function makeUseVisualState

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

function MeasureLayout

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

function mix

mix: {
    <T>(from: T, to: T): Mixer<T>;
    (from: number, to: number, p: number): number;
};

function motionValue

motionValue: <V>(init: V, options?: MotionValueOptions) => MotionValue<V>;

function parseComplexValue

parseComplexValue: (v: string | number) => ComplexValues;

function pipe

pipe: (...transformers: Function[]) => Function;

function progress

progress: (from: number, to: number, value: number) => number;

function ReorderGroup

ReorderGroup: <V>(props: any) => react_jsx_runtime.JSX.Element;

function ReorderGroupComponent

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

function ReorderItem

ReorderItem: <V>(props: any) => react_jsx_runtime.JSX.Element;

function ReorderItemComponent

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

function resolveMotionValue

resolveMotionValue: (
    value?: string | number | CustomValueType | MotionValue
) => string | number;

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 | GroupPlaybackControls,
    { axis, ...options }?: ScrollOptions
) => VoidFunction;

function scrollInfo

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

function spring

spring: ({
    keyframes,
    restDelta,
    restSpeed,
    ...options
}: ValueAnimationOptions<number>) => KeyframeGenerator<number>;

function stagger

stagger: (
    duration?: number,
    { startDelay, from, ease }?: StaggerOptions
) => DynamicOption<number>;

function startOptimizedAppearAnimation

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

function steps

steps: (numSteps: number, direction?: Direction) => EasingFunction;

function test

test: (v: any) => boolean;

function transform

transform: {
    <T>(
        inputValue: number,
        inputRange: number[],
        outputRange: T[],
        options?: TransformOptions<T>
    ): T;
    <T>(inputRange: number[], outputRange: T[], options?: TransformOptions<T>): (
        inputValue: number
    ) => T;
};

Transforms numbers into other values by mapping them from an input range to an output range. Returns the type of the input provided.
Parameter inputValue
A number to transform between the input and output ranges.
Parameter inputRange
A linear series of numbers (either all increasing or decreasing).
Parameter outputRange
A series of numbers, colors, strings, or arrays/objects of those. Must be the same length as inputRange.
Parameter options
Clamp: Clamp values to within the given range. Defaults to true.
Remarks
Given an input range of [0, 200] and an output range of [0, 1], this function will return a value between 0 and 1. The input range must be a linear series of numbers. The output range can be any supported value type, such as numbers, colors, shadows, arrays, objects and more. Every value in the output range must be of the same type and in the same format.
import * as React from "react" import { transform } from "framer-motion" export function MyComponent() { const inputRange = [0, 200] const outputRange = [0, 1] const output = transform(100, inputRange, outputRange) // Returns 0.5 return <div>{output}</div> }
Modifiers
- @public
Transforms numbers into other values by mapping them from an input range to an output range.
Given an input range of [0, 200] and an output range of [0, 1], this function will return a value between 0 and 1. The input range must be a linear series of numbers. The output range can be any supported value type, such as numbers, colors, shadows, arrays, objects and more. Every value in the output range must be of the same type and in the same format.
import * as React from "react" import { Frame, transform } from "framer" export function MyComponent() { const inputRange = [-200, -100, 100, 200] const outputRange = [0, 1, 1, 0] const convertRange = transform(inputRange, outputRange) const output = convertRange(-150) // Returns 0.5 return <div>{output}</div> }
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: clamp values to within the given range. Defaults to true.
Modifiers
- @public

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
        ): AnimationPlaybackControls;
        (
            value: string | MotionValue<string>,
            keyframes: string | GenericKeyframesTarget<string>,
            options?: ValueAnimationTransition<string> | undefined
        ): AnimationPlaybackControls;
        (
            value: number | MotionValue<number>,
            keyframes: number | GenericKeyframesTarget<number>,
            options?: ValueAnimationTransition<number> | undefined
        ): AnimationPlaybackControls;
        <V>(
            value: V | MotionValue<V>,
            keyframes: V | V[],
            options?: ValueAnimationTransition<V>
        ): AnimationPlaybackControls;
        (
            element: ElementOrSelector,
            keyframes: DOMKeyframesDefinition,
            options?: DynamicAnimationOptions | undefined
        ): AnimationPlaybackControls;
        <O extends {}>(
            object: O | O[],
            keyframes: ObjectTarget<O>,
            options?: DynamicAnimationOptions | undefined
        ): AnimationPlaybackControls;
    }
];

function useAnimateMini

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

function useAnimationControls

useAnimationControls: () => AnimationControls;

Creates AnimationControls, which can be used to manually start, stop and sequence animations on one or more components.
The returned AnimationControls 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 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$1<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$1<HTMLElement>) => {
    scrollX: MotionValue<number>;
    scrollY: MotionValue<number>;
    scrollXProgress: MotionValue<number>;
    scrollYProgress: 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$1<Element>,
    { root, margin, amount, once }?: UseInViewOptions
) => boolean;

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 keyof MotionValueEventCallbacks<V>>(
    value: MotionValue<V>,
    event: EventName,
    callback: MotionValueEventCallbacks<V>[EventName]
) => void;

function usePresence

usePresence: () => 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 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,
    layoutEffect,
    ...options
}?: UseScrollOptions) => {
    scrollX: MotionValue<number>;
    scrollY: MotionValue<number>;
    scrollXProgress: MotionValue<number>;
    scrollYProgress: MotionValue<number>;
};

function useSpring

useSpring: (
    source: MotionValue<string> | MotionValue<number> | number,
    config?: 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: () => 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<string | number>[],
        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 Framer 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 useViewportScroll

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

Deprecated
useViewportScroll is deprecated. Convert to useScroll()

function useWillChange

useWillChange: () => WillChange;

function wrap

wrap: (min: number, max: number, v: number) => number;

Classes

class AcceleratedAnimation

class AcceleratedAnimation<T extends string | number> extends BaseAnimation<
    T,
    ResolvedAcceleratedAnimation
> {}

constructor

constructor(options: ValueAnimationOptionsWithRenderContext<T>);

property duration

readonly duration: number;

property options

protected options: ValueAnimationOptionsWithDefaults<T> & {
    name: string;
    motionValue: MotionValue<T>;
};

property speed

speed: number;

property startTime

readonly startTime: number;

property state

readonly state: AnimationPlayState;

property time

time: number;

method attachTimeline

attachTimeline: (timeline: any) => (any: void) => void;

Replace the default DocumentTimeline with another AnimationTimeline. Currently used for scroll animations.

method cancel

cancel: () => void;

method complete

complete: () => void;

method initPlayback

protected initPlayback: (
    keyframes: ResolvedKeyframes<T>,
    finalKeyframe: T
) =>
    | false
    | {
          animation: Animation;
          duration: number;
          times: number[] | undefined;
          type: AnimationGeneratorType | undefined;
          ease: Easing | Easing[] | undefined;
          keyframes: number[] | string[];
      };

method pause

pause: () => void;

method play

play: () => void;

method stop

stop: () => void;

method supports

static supports: (
    options: ValueAnimationOptionsWithRenderContext
) => options is AcceleratedValueAnimationOptions<number>;

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

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 MotionValue

class MotionValue<V = any> {}

MotionValue is used to track the state and velocity of motion values.
Modifiers
- @public

property animation

animation?: AnimationPlaybackControls;

A reference to the currently-controlling animation.

property hasAnimated

hasAnimated: boolean;

property owner

owner?: Owner;

If a MotionValue has an owner, it was created internally within Framer Motion and therefore has no external listeners. It is therefore safe to animate via WAAPI.

property updateAndNotify

updateAndNotify: (v: V, render?: boolean) => void;

property version

version: string;

This will be replaced by the build step with the latest version number. When MotionValues are provided to motion components, warn if versions are mixed.

method clearListeners

clearListeners: () => void;

method destroy

destroy: () => void;

Destroy and clean up subscribers to this MotionValue.
The MotionValue hooks like useMotionValue and useTransform automatically handle the lifecycle of the returned MotionValue, so this method is only necessary if you've manually created a MotionValue via the motionValue function.
Modifiers
- @public

method get

get: () => NonNullable<V>;

Returns the latest state of MotionValue
Returns
- The latest state of MotionValue
Modifiers
- @public

method getVelocity

getVelocity: () => number;

Returns the latest velocity of MotionValue
Returns
- The latest velocity of MotionValue. Returns 0 if the state is non-numerical.
Modifiers
- @public

method isAnimating

isAnimating: () => boolean;

Returns true if this value is currently animating.
Modifiers
- @public

method jump

jump: (v: V, endAnimation?: boolean) => void;

Set the state of the MotionValue, stopping any active animations, effects, and resets velocity to 0.

method on

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

method onChange

onChange: (subscription: Subscriber<V>) => () => void;

Adds a function that will be notified when the MotionValue is updated.

It returns a function that, when called, will cancel the subscription.

When calling onChange inside a React component, it should be wrapped with the useEffect hook. As it returns an unsubscribe function, this should be returned from the useEffect function to ensure you don't add duplicate subscribers..

export const MyComponent = () => {
  const x = useMotionValue(0)
  const y = useMotionValue(0)
  const opacity = useMotionValue(1)

  useEffect(() => {
    function updateOpacity() {
      const maxXY = Math.max(x.get(), y.get())
      const newOpacity = transform(maxXY, [0, 100], [1, 0])
      opacity.set(newOpacity)
    }

    const unsubscribeX = x.on("change", updateOpacity)
    const unsubscribeY = y.on("change", updateOpacity)

    return () => {
      unsubscribeX()
      unsubscribeY()
    }
  }, [])

  return <motion.div style={{ x }} />
}

Parameter subscriber

A function that receives the latest value.

Returns

A function that, when called, will cancel this subscription.

Deprecated

method set

set: (v: V, render?: boolean) => void;

Sets the state of the MotionValue.
Parameter latest
Latest value to set.
Parameter render
Whether to notify render subscribers. Defaults to true
Remarks
const x = useMotionValue(0) x.set(10)
Modifiers
- @public

method setCurrent

setCurrent: (current: V) => void;

method setPrevFrameValue

setPrevFrameValue: (prevFrameValue?: V | undefined) => void;

method setWithVelocity

setWithVelocity: (prev: V, current: V, delta: number) => void;

method stop

stop: () => void;

Stop the currently active animation.
Modifiers
- @public

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$1;

The AnimationState, this is hydrated by the animation Feature.

property applyWillChange

applyWillChange: boolean;

If true, will-change will be applied to the element. Only HTMLVisualElements currently support this.

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 isControllingVariants

isControllingVariants: boolean;

property isVariantNode

isVariantNode: boolean;

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

property KeyframeResolver

KeyframeResolver: typeof KeyframeResolver;

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 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
) => string | number | 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: () => Transition$1 | undefined;

Returns the defined default transition on this component.

method getProps

getProps: () => MotionProps;

method getStaticValue

getStaticValue: (key: string) => string | number;

method getTransformPagePoint

getTransformPagePoint: () => any;

method getValue

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

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) => 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 readValue

readValue: (key: string, target?: string | number | 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
) => string | number | 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 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 scrapeMotionValuesFromProps

scrapeMotionValuesFromProps: (
    _props: MotionProps,
    _prevProps: MotionProps,
    _visualElement: VisualElement
) => { [key: string]: string | number | MotionValue<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: string | number) => 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: string | number) => 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;

Interfaces

interface AbsoluteKeyframe

interface AbsoluteKeyframe {}

property at

at: number;

property easing

easing?: Easing;

property value

value: string | number | null;

interface AnimatePresenceProps

interface AnimatePresenceProps {}

Modifiers
- @public

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 exitBeforeEnter

exitBeforeEnter?: boolean;

Replace with mode="wait"
Deprecated
Replace with mode="wait"

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.

interface AnimationControls

interface AnimationControls {}

Modifiers
- @public

method mount

mount: () => () => void;

method set

set: (definition: AnimationDefinition) => void;

Instantly set to a set of properties or a variant.

// With properties
controls.set({ opacity: 0 })

// With variants
controls.set("hidden")

Modifiers

@public

method start

start: (
    definition: AnimationDefinition,
    transitionOverride?: Transition
) => Promise<any>;

Starts an animation on all linked components.
Parameter definition
Properties or variant label to animate to
Parameter transition
Optional transtion to apply to a variant
Returns
- A Promise that resolves when all animations have completed.
Remarks
controls.start("variantLabel") controls.start({ x: 0, transition: { duration: 1 } })
Modifiers
- @public

method stop

stop: () => void;

Stops animations on all linked components.
controls.stop()
Modifiers
- @public

interface AnimationLifecycles

interface AnimationLifecycles {}

method onAnimationComplete

onAnimationComplete: (definition: AnimationDefinition) => void;

Callback when animation defined in animate is complete.
The provided callback will be called with the triggering animation definition. If this is a variant, it'll be the variant name, and if a target object then it'll be the target object.
This way, it's possible to figure out which animation has completed.
function onComplete() { console.log("Animation completed") } <motion.div animate={{ x: 100 }} onAnimationComplete={definition => { console.log('Completed animating', definition) }} />

method onAnimationStart

onAnimationStart: (definition: AnimationDefinition) => void;

Callback when animation defined in animate begins.
The provided callback will be called with the triggering animation definition. If this is a variant, it'll be the variant name, and if a target object then it'll be the target object.
This way, it's possible to figure out which animation has started.
function onStart() { console.log("Animation started") } <motion.div animate={{ x: 100 }} onAnimationStart={onStart} />

method onUpdate

onUpdate: (latest: ResolvedValues) => void;

Callback with latest motion values, fired max once per frame.

function onUpdate(latest) {
  console.log(latest.x, latest.opacity)
}

<motion.div animate={{ x: 100, opacity: 0 }} onUpdate={onUpdate} />

interface AnimationPlaybackControls

interface AnimationPlaybackControls {}

Modifiers
- @public

property attachTimeline

attachTimeline?: (
    timeline: ProgressTimeline,
    fallback?: (animation: AnimationPlaybackControls) => VoidFunction
) => VoidFunction;

property cancel

cancel: () => void;

property complete

complete: () => void;

property duration

duration: number;

property pause

pause: () => void;

property play

play: () => void;

property speed

speed: number;

property startTime

startTime: number | null;

property state

state?: AnimationPlayState;

property stop

stop: () => void;

property then

then: (onResolve: VoidFunction, onReject?: VoidFunction) => Promise<void>;

property time

time: number;

interface AnimationPlaybackLifecycles

interface AnimationPlaybackLifecycles<V> {}

property onComplete

onComplete?: () => void;

property onPlay

onPlay?: () => void;

property onRepeat

onRepeat?: () => void;

property onStop

onStop?: () => void;

property onUpdate

onUpdate?: (latest: V) => void;

interface AnimationPlaybackOptions

interface AnimationPlaybackOptions {}

property repeat

repeat?: number;

property repeatDelay

repeatDelay?: number;

property repeatType

repeatType?: RepeatType;

interface AnimationProps

interface AnimationProps {}

Modifiers
- @public

property animate

animate?: AnimationControls | TargetAndTransition | VariantLabels | boolean;

Values to animate to, variant label(s), or AnimationControls.

// As values
<motion.div animate={{ opacity: 1 }} />

// As variant
<motion.div animate="visible" variants={variants} />

// Multiple variants
<motion.div animate={["visible", "active"]} variants={variants} />

// AnimationControls
<motion.div animate={animation} />

property exit

exit?: TargetAndTransition | VariantLabels;

A target to animate to when this component is removed from the tree.
This component **must** be the first animatable child of an AnimatePresence to enable this exit animation.
This limitation exists because React doesn't allow components to defer unmounting until after an animation is complete. Once this limitation is fixed, the AnimatePresence component will be unnecessary.
import { AnimatePresence, motion } from 'framer-motion' export const MyComponent = ({ isVisible })

framer-motion

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Namespaces

Variables

variable animate

variable AnimatePresence

Modifiers

variable AnimateSharedLayout

variable animations

variable backIn

variable backInOut

variable cancelSync

Deprecated

variable circIn

variable circInOut

variable circOut

variable color

variable complex

variable DeprecatedLayoutGroupContext

Deprecated

variable domAnimation

Modifiers

variable domMax

Modifiers

variable domMin

Modifiers

variable frame

variable frameData

variable frameSteps

variable htmlElements

variable invariant

variable isBrowser

variable LayoutGroup

variable LayoutGroupContext

variable m

variable mirrorEasing

variable motion

variable MotionConfigContext

Modifiers

variable MotionContext

variable MotionGlobalConfig

variable optimizedAppearDataAttribute

variable PresenceContext

Modifiers

variable px

variable reverseEasing

variable svgElements

variable SwitchLayoutGroupContext

variable sync

Deprecated

variable useAnimation

variable useIsomorphicLayoutEffect

variable visualElementStore

variable warning

Functions

function addPointerEvent

function addPointerInfo

function addScaleCorrector

function animateMini

function animateValue

function animateVisualElement

function animationControls

Modifiers

function anticipate

function backOut

function buildTransform

function calcLength

function cancelFrame

function clamp

function createBox

function createRendererMotionComponent

function createScopedAnimate

function createTransformer