framer-motion

  • Version 11.2.11
  • Published
  • 1.99 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

Functions

Classes

Interfaces

Type Aliases

Namespaces

Variables

variable animate

const animate: {
<V>(
from: V,
to: V | GenericKeyframesTarget<V>,
options?: ValueAnimationTransition<V>
): AnimationPlaybackControls;
<V_1>(
value: MotionValue<V_1>,
keyframes: V_1 | GenericKeyframesTarget<V_1>,
options?: ValueAnimationTransition<V_1>
): AnimationPlaybackControls;
(
value: ElementOrSelector,
keyframes: DOMKeyframesDefinition,
options?: DynamicAnimationOptions
): AnimationPlaybackControls;
(
sequence: AnimationSequence,
options?: SequenceOptions
): AnimationPlaybackControls;
};

    variable AnimatePresence

    const AnimatePresence: react.FunctionComponent<
    react.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.FunctionComponent<react.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.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 frame

                      const frame: Batcher;

                        variable frameData

                        const frameData: FrameData;

                          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.FunctionComponent<react.PropsWithChildren<Props$2>>;

                                  variable LayoutGroupContext

                                  const LayoutGroupContext: react.Context<LayoutGroupContextProps>;

                                    variable m

                                    const m: (<Props extends {}>(
                                    Component: any,
                                    customMotionComponentConfig?: CustomMotionComponentConfig
                                    ) => react.ForwardRefExoticComponent<any>) &
                                    HTMLMotionComponents &
                                    SVGMotionComponents;
                                    • Modifiers

                                      • @public

                                    variable mirrorEasing

                                    const mirrorEasing: EasingModifier;

                                      variable motion

                                      const motion: (<Props extends {}>(
                                      Component: any,
                                      customMotionComponentConfig?: CustomMotionComponentConfig
                                      ) => react.ForwardRefExoticComponent<any>) &
                                      HTMLMotionComponents &
                                      SVGMotionComponents;
                                      • HTML & SVG components, optimised for use with gestures and animation. These can be used as drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.

                                        Modifiers

                                        • @public

                                      variable MotionConfigContext

                                      const MotionConfigContext: react.Context<MotionConfigContext>;
                                      • Modifiers

                                        • @public

                                      variable MotionContext

                                      const MotionContext: react.Context<MotionContextProps<unknown>>;

                                        variable MotionGlobalConfig

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

                                          variable optimizedAppearDataAttribute

                                          const optimizedAppearDataAttribute: string;

                                            variable PresenceContext

                                            const PresenceContext: react.Context<PresenceContextProps>;
                                            • Modifiers

                                              • @public

                                            variable px

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

                                              variable Reorder

                                              const Reorder: {
                                              Group: <V>(
                                              props: Props<V> &
                                              Omit<HTMLMotionProps<any>, 'values'> & { children?: react.ReactNode } & {
                                              ref?: react.ForwardedRef<any> | undefined;
                                              }
                                              ) => react_jsx_runtime.JSX.Element;
                                              Item: <V_1>(
                                              props: Props$1<V_1> & {
                                              color?: string | undefined;
                                              content?: string | undefined;
                                              translate?: 'no' | 'yes' | undefined;
                                              hidden?: boolean | undefined;
                                              suppressHydrationWarning?: boolean | undefined;
                                              className?: string | undefined;
                                              id?: string | undefined;
                                              lang?: string | undefined;
                                              role?: react.AriaRole | undefined;
                                              tabIndex?: number | undefined;
                                              'aria-activedescendant'?: string | undefined;
                                              'aria-atomic'?: (boolean | 'false' | 'true') | undefined;
                                              'aria-autocomplete'?: 'both' | 'none' | 'inline' | 'list' | undefined;
                                              'aria-braillelabel'?: string | undefined;
                                              'aria-brailleroledescription'?: string | undefined;
                                              'aria-busy'?: (boolean | 'false' | 'true') | undefined;
                                              'aria-checked'?: boolean | 'mixed' | 'false' | 'true' | undefined;
                                              'aria-colcount'?: number | undefined;
                                              'aria-colindex'?: number | undefined;
                                              'aria-colindextext'?: string | undefined;
                                              'aria-colspan'?: number | undefined;
                                              'aria-controls'?: string | undefined;
                                              'aria-current'?:
                                              | boolean
                                              | 'page'
                                              | 'false'
                                              | 'true'
                                              | 'step'
                                              | 'location'
                                              | 'date'
                                              | 'time'
                                              | undefined;
                                              'aria-describedby'?: string | undefined;
                                              'aria-description'?: string | undefined;
                                              'aria-details'?: string | undefined;
                                              'aria-disabled'?: (boolean | 'false' | 'true') | undefined;
                                              'aria-dropeffect'?:
                                              | 'none'
                                              | 'copy'
                                              | 'move'
                                              | 'link'
                                              | 'execute'
                                              | 'popup'
                                              | undefined;
                                              'aria-errormessage'?: string | undefined;
                                              'aria-expanded'?: (boolean | 'false' | 'true') | undefined;
                                              'aria-flowto'?: string | undefined;
                                              'aria-grabbed'?: (boolean | 'false' | 'true') | undefined;
                                              'aria-haspopup'?:
                                              | boolean
                                              | 'grid'
                                              | 'listbox'
                                              | 'menu'
                                              | 'false'
                                              | 'true'
                                              | 'dialog'
                                              | 'tree'
                                              | undefined;
                                              'aria-hidden'?: (boolean | 'false' | 'true') | undefined;
                                              'aria-invalid'?:
                                              | boolean
                                              | 'false'
                                              | 'true'
                                              | 'grammar'
                                              | 'spelling'
                                              | undefined;
                                              'aria-keyshortcuts'?: string | undefined;
                                              'aria-label'?: string | undefined;
                                              'aria-labelledby'?: string | undefined;
                                              'aria-level'?: number | undefined;
                                              'aria-live'?: 'off' | 'assertive' | 'polite' | undefined;
                                              'aria-modal'?: (boolean | 'false' | 'true') | undefined;
                                              'aria-multiline'?: (boolean | 'false' | 'true') | undefined;
                                              'aria-multiselectable'?: (boolean | 'false' | 'true') | undefined;
                                              'aria-orientation'?: 'horizontal' | 'vertical' | undefined;
                                              'aria-owns'?: string | undefined;
                                              'aria-placeholder'?: string | undefined;
                                              'aria-posinset'?: number | undefined;
                                              'aria-pressed'?: boolean | 'mixed' | 'false' | 'true' | undefined;
                                              'aria-readonly'?: (boolean | 'false' | 'true') | undefined;
                                              'aria-relevant'?:
                                              | 'all'
                                              | 'text'
                                              | 'additions'
                                              | 'additions removals'
                                              | 'additions text'
                                              | 'removals'
                                              | 'removals additions'
                                              | 'removals text'
                                              | 'text additions'
                                              | 'text removals'
                                              | undefined;
                                              'aria-required'?: (boolean | 'false' | 'true') | undefined;
                                              'aria-roledescription'?: string | undefined;
                                              'aria-rowcount'?: number | undefined;
                                              'aria-rowindex'?: number | undefined;
                                              'aria-rowindextext'?: string | undefined;
                                              'aria-rowspan'?: number | undefined;
                                              'aria-selected'?: (boolean | 'false' | 'true') | undefined;
                                              'aria-setsize'?: number | undefined;
                                              'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined;
                                              'aria-valuemax'?: number | undefined;
                                              'aria-valuemin'?: number | undefined;
                                              'aria-valuenow'?: number | undefined;
                                              'aria-valuetext'?: string | undefined;
                                              dangerouslySetInnerHTML?: { __html: string | TrustedHTML } | undefined;
                                              onCopy?: react.ClipboardEventHandler<any> | undefined;
                                              onCopyCapture?: react.ClipboardEventHandler<any> | undefined;
                                              onCut?: react.ClipboardEventHandler<any> | undefined;
                                              onCutCapture?: react.ClipboardEventHandler<any> | undefined;
                                              onPaste?: react.ClipboardEventHandler<any> | undefined;
                                              onPasteCapture?: react.ClipboardEventHandler<any> | undefined;
                                              onCompositionEnd?: react.CompositionEventHandler<any> | undefined;
                                              onCompositionEndCapture?: react.CompositionEventHandler<any> | undefined;
                                              onCompositionStart?: react.CompositionEventHandler<any> | undefined;
                                              onCompositionStartCapture?:
                                              | react.CompositionEventHandler<any>
                                              | undefined;
                                              onCompositionUpdate?: react.CompositionEventHandler<any> | undefined;
                                              onCompositionUpdateCapture?:
                                              | react.CompositionEventHandler<any>
                                              | undefined;
                                              onFocus?: react.FocusEventHandler<any> | undefined;
                                              onFocusCapture?: react.FocusEventHandler<any> | undefined;
                                              onBlur?: react.FocusEventHandler<any> | undefined;
                                              onBlurCapture?: react.FocusEventHandler<any> | undefined;
                                              onChange?: react.FormEventHandler<any> | undefined;
                                              onChangeCapture?: react.FormEventHandler<any> | undefined;
                                              onBeforeInput?: react.FormEventHandler<any> | undefined;
                                              onBeforeInputCapture?: react.FormEventHandler<any> | undefined;
                                              onInput?: react.FormEventHandler<any> | undefined;
                                              onInputCapture?: react.FormEventHandler<any> | undefined;
                                              onReset?: react.FormEventHandler<any> | undefined;
                                              onResetCapture?: react.FormEventHandler<any> | undefined;
                                              onSubmit?: react.FormEventHandler<any> | undefined;
                                              onSubmitCapture?: react.FormEventHandler<any> | undefined;
                                              onInvalid?: react.FormEventHandler<any> | undefined;
                                              onInvalidCapture?: react.FormEventHandler<any> | undefined;
                                              onLoad?: react.ReactEventHandler<any> | undefined;
                                              onLoadCapture?: react.ReactEventHandler<any> | undefined;
                                              onError?: react.ReactEventHandler<any> | undefined;
                                              onErrorCapture?: react.ReactEventHandler<any> | undefined;
                                              onKeyDown?: react.KeyboardEventHandler<any> | undefined;
                                              onKeyDownCapture?: react.KeyboardEventHandler<any> | undefined;
                                              onKeyPress?: react.KeyboardEventHandler<any> | undefined;
                                              onKeyPressCapture?: react.KeyboardEventHandler<any> | undefined;
                                              onKeyUp?: react.KeyboardEventHandler<any> | undefined;
                                              onKeyUpCapture?: react.KeyboardEventHandler<any> | undefined;
                                              onAbort?: react.ReactEventHandler<any> | undefined;
                                              onAbortCapture?: react.ReactEventHandler<any> | undefined;
                                              onCanPlay?: react.ReactEventHandler<any> | undefined;
                                              onCanPlayCapture?: react.ReactEventHandler<any> | undefined;
                                              onCanPlayThrough?: react.ReactEventHandler<any> | undefined;
                                              onCanPlayThroughCapture?: react.ReactEventHandler<any> | undefined;
                                              onDurationChange?: react.ReactEventHandler<any> | undefined;
                                              onDurationChangeCapture?: react.ReactEventHandler<any> | undefined;
                                              onEmptied?: react.ReactEventHandler<any> | undefined;
                                              onEmptiedCapture?: react.ReactEventHandler<any> | undefined;
                                              onEncrypted?: react.ReactEventHandler<any> | undefined;
                                              onEncryptedCapture?: react.ReactEventHandler<any> | undefined;
                                              onEnded?: react.ReactEventHandler<any> | undefined;
                                              onEndedCapture?: react.ReactEventHandler<any> | undefined;
                                              onLoadedData?: react.ReactEventHandler<any> | undefined;
                                              onLoadedDataCapture?: react.ReactEventHandler<any> | undefined;
                                              onLoadedMetadata?: react.ReactEventHandler<any> | undefined;
                                              onLoadedMetadataCapture?: react.ReactEventHandler<any> | undefined;
                                              onLoadStart?: react.ReactEventHandler<any> | undefined;
                                              onLoadStartCapture?: react.ReactEventHandler<any> | undefined;
                                              onPause?: react.ReactEventHandler<any> | undefined;
                                              onPauseCapture?: react.ReactEventHandler<any> | undefined;
                                              onPlay?: react.ReactEventHandler<any> | undefined;
                                              onPlayCapture?: react.ReactEventHandler<any> | undefined;
                                              onPlaying?: react.ReactEventHandler<any> | undefined;
                                              onPlayingCapture?: react.ReactEventHandler<any> | undefined;
                                              onProgress?: react.ReactEventHandler<any> | undefined;
                                              onProgressCapture?: react.ReactEventHandler<any> | undefined;
                                              onRateChange?: react.ReactEventHandler<any> | undefined;
                                              onRateChangeCapture?: react.ReactEventHandler<any> | undefined;
                                              onResize?: react.ReactEventHandler<any> | undefined;
                                              onResizeCapture?: react.ReactEventHandler<any> | undefined;
                                              onSeeked?: react.ReactEventHandler<any> | undefined;
                                              onSeekedCapture?: react.ReactEventHandler<any> | undefined;
                                              onSeeking?: react.ReactEventHandler<any> | undefined;
                                              onSeekingCapture?: react.ReactEventHandler<any> | undefined;
                                              onStalled?: react.ReactEventHandler<any> | undefined;
                                              onStalledCapture?: react.ReactEventHandler<any> | undefined;
                                              onSuspend?: react.ReactEventHandler<any> | undefined;
                                              onSuspendCapture?: react.ReactEventHandler<any> | undefined;
                                              onTimeUpdate?: react.ReactEventHandler<any> | undefined;
                                              onTimeUpdateCapture?: react.ReactEventHandler<any> | undefined;
                                              onVolumeChange?: react.ReactEventHandler<any> | undefined;
                                              onVolumeChangeCapture?: react.ReactEventHandler<any> | undefined;
                                              onWaiting?: react.ReactEventHandler<any> | undefined;
                                              onWaitingCapture?: react.ReactEventHandler<any> | undefined;
                                              onAuxClick?: react.MouseEventHandler<any> | undefined;
                                              onAuxClickCapture?: react.MouseEventHandler<any> | undefined;
                                              onClick?: react.MouseEventHandler<any> | undefined;
                                              onClickCapture?: react.MouseEventHandler<any> | undefined;
                                              onContextMenu?: react.MouseEventHandler<any> | undefined;
                                              onContextMenuCapture?: react.MouseEventHandler<any> | undefined;
                                              onDoubleClick?: react.MouseEventHandler<any> | undefined;
                                              onDoubleClickCapture?: react.MouseEventHandler<any> | undefined;
                                              onDragCapture?: react.DragEventHandler<any> | undefined;
                                              onDragEndCapture?: react.DragEventHandler<any> | undefined;
                                              onDragEnter?: react.DragEventHandler<any> | undefined;
                                              onDragEnterCapture?: react.DragEventHandler<any> | undefined;
                                              onDragExit?: react.DragEventHandler<any> | undefined;
                                              onDragExitCapture?: react.DragEventHandler<any> | undefined;
                                              onDragLeave?: react.DragEventHandler<any> | undefined;
                                              onDragLeaveCapture?: react.DragEventHandler<any> | undefined;
                                              onDragOver?: react.DragEventHandler<any> | undefined;
                                              onDragOverCapture?: react.DragEventHandler<any> | undefined;
                                              onDragStartCapture?: react.DragEventHandler<any> | undefined;
                                              onDrop?: react.DragEventHandler<any> | undefined;
                                              onDropCapture?: react.DragEventHandler<any> | undefined;
                                              onMouseDown?: react.MouseEventHandler<any> | undefined;
                                              onMouseDownCapture?: react.MouseEventHandler<any> | undefined;
                                              onMouseEnter?: react.MouseEventHandler<any> | undefined;
                                              onMouseLeave?: react.MouseEventHandler<any> | undefined;
                                              onMouseMove?: react.MouseEventHandler<any> | undefined;
                                              onMouseMoveCapture?: react.MouseEventHandler<any> | undefined;
                                              onMouseOut?: react.MouseEventHandler<any> | undefined;
                                              onMouseOutCapture?: react.MouseEventHandler<any> | undefined;
                                              onMouseOver?: react.MouseEventHandler<any> | undefined;
                                              onMouseOverCapture?: react.MouseEventHandler<any> | undefined;
                                              onMouseUp?: react.MouseEventHandler<any> | undefined;
                                              onMouseUpCapture?: react.MouseEventHandler<any> | undefined;
                                              onSelect?: react.ReactEventHandler<any> | undefined;
                                              onSelectCapture?: react.ReactEventHandler<any> | undefined;
                                              onTouchCancel?: react.TouchEventHandler<any> | undefined;
                                              onTouchCancelCapture?: react.TouchEventHandler<any> | undefined;
                                              onTouchEnd?: react.TouchEventHandler<any> | undefined;
                                              onTouchEndCapture?: react.TouchEventHandler<any> | undefined;
                                              onTouchMove?: react.TouchEventHandler<any> | undefined;
                                              onTouchMoveCapture?: react.TouchEventHandler<any> | undefined;
                                              onTouchStart?: react.TouchEventHandler<any> | undefined;
                                              onTouchStartCapture?: react.TouchEventHandler<any> | undefined;
                                              onPointerDown?: react.PointerEventHandler<any> | undefined;
                                              onPointerDownCapture?: react.PointerEventHandler<any> | undefined;
                                              onPointerMove?: react.PointerEventHandler<any> | undefined;
                                              onPointerMoveCapture?: react.PointerEventHandler<any> | undefined;
                                              onPointerUp?: react.PointerEventHandler<any> | undefined;
                                              onPointerUpCapture?: react.PointerEventHandler<any> | undefined;
                                              onPointerCancel?: react.PointerEventHandler<any> | undefined;
                                              onPointerCancelCapture?: react.PointerEventHandler<any> | undefined;
                                              onPointerEnter?: react.PointerEventHandler<any> | undefined;
                                              onPointerLeave?: react.PointerEventHandler<any> | undefined;
                                              onPointerOver?: react.PointerEventHandler<any> | undefined;
                                              onPointerOverCapture?: react.PointerEventHandler<any> | undefined;
                                              onPointerOut?: react.PointerEventHandler<any> | undefined;
                                              onPointerOutCapture?: react.PointerEventHandler<any> | undefined;
                                              onGotPointerCapture?: react.PointerEventHandler<any> | undefined;
                                              onGotPointerCaptureCapture?: react.PointerEventHandler<any> | undefined;
                                              onLostPointerCapture?: react.PointerEventHandler<any> | undefined;
                                              onLostPointerCaptureCapture?: react.PointerEventHandler<any> | undefined;
                                              onScroll?: react.UIEventHandler<any> | undefined;
                                              onScrollCapture?: react.UIEventHandler<any> | undefined;
                                              onWheel?: react.WheelEventHandler<any> | undefined;
                                              onWheelCapture?: react.WheelEventHandler<any> | undefined;
                                              onAnimationStartCapture?: react.AnimationEventHandler<any> | undefined;
                                              onAnimationEnd?: react.AnimationEventHandler<any> | undefined;
                                              onAnimationEndCapture?: react.AnimationEventHandler<any> | undefined;
                                              onAnimationIteration?: react.AnimationEventHandler<any> | undefined;
                                              onAnimationIterationCapture?:
                                              | react.AnimationEventHandler<any>
                                              | undefined;
                                              onTransitionEnd?: react.TransitionEventHandler<any> | undefined;
                                              onTransitionEndCapture?: react.TransitionEventHandler<any> | undefined;
                                              nonce?: string | undefined;
                                              slot?: string | undefined;
                                              title?: string | undefined;
                                              dir?: string | undefined;
                                              defaultChecked?: boolean | undefined;
                                              defaultValue?: string | number | readonly string[] | undefined;
                                              suppressContentEditableWarning?: boolean | undefined;
                                              accessKey?: string | undefined;
                                              autoFocus?: boolean | undefined;
                                              contentEditable?:
                                              | 'inherit'
                                              | (boolean | 'false' | 'true')
                                              | 'plaintext-only'
                                              | undefined;
                                              contextMenu?: string | undefined;
                                              draggable?: (boolean | 'false' | 'true') | undefined;
                                              spellCheck?: (boolean | 'false' | 'true') | undefined;
                                              radioGroup?: string | undefined;
                                              about?: string | undefined;
                                              datatype?: string | undefined;
                                              inlist?: any;
                                              prefix?: string | undefined;
                                              property?: string | undefined;
                                              rel?: string | undefined;
                                              resource?: string | undefined;
                                              rev?: string | undefined;
                                              typeof?: string | undefined;
                                              vocab?: string | undefined;
                                              autoCapitalize?: string | undefined;
                                              autoCorrect?: string | undefined;
                                              autoSave?: string | undefined;
                                              itemProp?: string | undefined;
                                              itemScope?: boolean | undefined;
                                              itemType?: string | undefined;
                                              itemID?: string | undefined;
                                              itemRef?: string | undefined;
                                              results?: number | undefined;
                                              security?: string | undefined;
                                              unselectable?: 'off' | 'on' | undefined;
                                              inputMode?:
                                              | 'none'
                                              | 'text'
                                              | 'search'
                                              | 'tel'
                                              | 'url'
                                              | 'email'
                                              | 'numeric'
                                              | 'decimal'
                                              | undefined;
                                              is?: string | undefined;
                                              } & MotionProps & { children?: react.ReactNode } & {
                                              ref?: react.ForwardedRef<any> | undefined;
                                              }
                                              ) => react_jsx_runtime.JSX.Element;
                                              };

                                                variable reverseEasing

                                                const reverseEasing: EasingModifier;

                                                  variable steps

                                                  const steps: Steps;

                                                    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.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 animateValue

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

                                                                      function animateVisualElement

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

                                                                        function animationControls

                                                                        animationControls: () => AnimationControls;
                                                                        • Modifiers

                                                                          • @public

                                                                        function anticipate

                                                                        anticipate: (p: number) => number;

                                                                          function backOut

                                                                          backOut: (t: number) => number;

                                                                            function buildTransform

                                                                            buildTransform: (
                                                                            transform: HTMLRenderState['transform'],
                                                                            { enableHardwareAcceleration, allowTransformNone }: DOMVisualElementOptions,
                                                                            transformIsDefault: boolean,
                                                                            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 createDomMotionComponent

                                                                                    createDomMotionComponent: <
                                                                                    T extends
                                                                                    | 'symbol'
                                                                                    | 'object'
                                                                                    | 'image'
                                                                                    | 'style'
                                                                                    | 'animate'
                                                                                    | 'time'
                                                                                    | 'link'
                                                                                    | 'menu'
                                                                                    | 'dialog'
                                                                                    | 'text'
                                                                                    | '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'
                                                                                    | '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'
                                                                                    | 'main'
                                                                                    | 'map'
                                                                                    | 'mark'
                                                                                    | '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'
                                                                                    | 'title'
                                                                                    | 'tr'
                                                                                    | 'track'
                                                                                    | 'u'
                                                                                    | 'ul'
                                                                                    | 'var'
                                                                                    | 'video'
                                                                                    | 'wbr'
                                                                                    | 'webview'
                                                                                    | 'circle'
                                                                                    | 'defs'
                                                                                    | 'desc'
                                                                                    | 'ellipse'
                                                                                    | 'g'
                                                                                    | 'line'
                                                                                    | 'metadata'
                                                                                    | 'pattern'
                                                                                    | 'polygon'
                                                                                    | 'polyline'
                                                                                    | 'rect'
                                                                                    | 'stop'
                                                                                    | 'svg'
                                                                                    | 'switch'
                                                                                    | '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'
                                                                                    >(
                                                                                    key: T
                                                                                    ) => DOMMotionComponents[T];
                                                                                    • Create a DOM motion component with the provided string. This is primarily intended as a full alternative to motion for consumers who have to support environments that don't support Proxy.

                                                                                      import { createDomMotionComponent } from "framer-motion"
                                                                                      const motion = {
                                                                                      div: createDomMotionComponent('div')
                                                                                      }

                                                                                      Modifiers

                                                                                      • @public

                                                                                    function createMotionComponent

                                                                                    createMotionComponent: <Props extends {}, Instance, RenderState>({
                                                                                    preloadedFeatures,
                                                                                    createVisualElement,
                                                                                    useRender,
                                                                                    useVisualState,
                                                                                    Component,
                                                                                    }: MotionComponentConfig<
                                                                                    Instance,
                                                                                    RenderState
                                                                                    >) => react.ForwardRefExoticComponent<any>;
                                                                                    • 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) => {
                                                                                    <V>(
                                                                                    from: V,
                                                                                    to: V | GenericKeyframesTarget<V>,
                                                                                    options?: ValueAnimationTransition<V>
                                                                                    ): AnimationPlaybackControls;
                                                                                    <V_1>(
                                                                                    value: MotionValue<V_1>,
                                                                                    keyframes: V_1 | GenericKeyframesTarget<V_1>,
                                                                                    options?: ValueAnimationTransition<V_1>
                                                                                    ): AnimationPlaybackControls;
                                                                                    (
                                                                                    value: ElementOrSelector,
                                                                                    keyframes: DOMKeyframesDefinition,
                                                                                    options?: DynamicAnimationOptions
                                                                                    ): AnimationPlaybackControls;
                                                                                    (
                                                                                    sequence: AnimationSequence,
                                                                                    options?: SequenceOptions
                                                                                    ): AnimationPlaybackControls;
                                                                                    };

                                                                                      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 getAnimatableNone

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

                                                                                                          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 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<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 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 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 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,
                                                                                                                              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 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>,
                                                                                                                                          {
                                                                                                                                          <V>(
                                                                                                                                          from: V,
                                                                                                                                          to: V | GenericKeyframesTarget<V>,
                                                                                                                                          options?: ValueAnimationTransition<V>
                                                                                                                                          ): AnimationPlaybackControls;
                                                                                                                                          <V_1>(
                                                                                                                                          value: MotionValue<V_1>,
                                                                                                                                          keyframes: V_1 | GenericKeyframesTarget<V_1>,
                                                                                                                                          options?: ValueAnimationTransition<V_1>
                                                                                                                                          ): AnimationPlaybackControls;
                                                                                                                                          (
                                                                                                                                          value: ElementOrSelector,
                                                                                                                                          keyframes: DOMKeyframesDefinition,
                                                                                                                                          options?: DynamicAnimationOptions | undefined
                                                                                                                                          ): AnimationPlaybackControls;
                                                                                                                                          (
                                                                                                                                          sequence: AnimationSequence,
                                                                                                                                          options?: SequenceOptions | undefined
                                                                                                                                          ): AnimationPlaybackControls;
                                                                                                                                          }
                                                                                                                                          ];

                                                                                                                                            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 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 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 | number,
                                                                                                                                                              config?: SpringOptions
                                                                                                                                                              ) => MotionValue<any>;
                                                                                                                                                              • 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 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: 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: ValueAnimationOptions<T>);

                                                                                                                                                                          property duration

                                                                                                                                                                          readonly duration: number;

                                                                                                                                                                            property options

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

                                                                                                                                                                              property speed

                                                                                                                                                                              speed: 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:
                                                                                                                                                                                        | 'keyframes'
                                                                                                                                                                                        | 'spring'
                                                                                                                                                                                        | 'decay'
                                                                                                                                                                                        | 'tween'
                                                                                                                                                                                        | 'inertia'
                                                                                                                                                                                        | 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: ValueAnimationOptions
                                                                                                                                                                                                ) => options is AcceleratedValueAnimationOptions<number>;

                                                                                                                                                                                                  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 start

                                                                                                                                                                                                  start: (
                                                                                                                                                                                                  event: react.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 getPrevious

                                                                                                                                                                                                                getPrevious: () => V | undefined;
                                                                                                                                                                                                                • 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 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 resolveKeyframes

                                                                                                                                                                                                                                        resolveKeyframes: <T extends string | number>(
                                                                                                                                                                                                                                        keyframes: UnresolvedKeyframes<T>,
                                                                                                                                                                                                                                        onComplete: (resolvedKeyframes: ResolvedKeyframes<T>) => void,
                                                                                                                                                                                                                                        name: string,
                                                                                                                                                                                                                                        value: MotionValue<T>
                                                                                                                                                                                                                                        ) => KeyframeResolver<T>;

                                                                                                                                                                                                                                          property scheduleRender

                                                                                                                                                                                                                                          scheduleRender: () => Process;

                                                                                                                                                                                                                                            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,
                                                                                                                                                                                                                                            options: Options,
                                                                                                                                                                                                                                            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 getVariantContext

                                                                                                                                                                                                                                                    getVariantContext: (startAtParent?: boolean) => undefined | VariantStateContext;

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