framer-motion

  • Version 12.18.1
  • Published
  • 2.3 MB
  • 3 dependencies
  • MIT license

Install

npm i framer-motion
yarn add framer-motion
pnpm add framer-motion

Overview

A simple and powerful JavaScript animation library

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Namespaces

Variables

variable animate

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

    variable AnimateSharedLayout

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

      variable animations

      const animations: FeaturePackages;

        variable DeprecatedLayoutGroupContext

        const DeprecatedLayoutGroupContext: React$1.Context<string>;
        • Note: Still used by components generated by old versions of Framer

          Deprecated

        variable domAnimation

        const domAnimation: FeatureBundle;
        • Modifiers

          • @public

        variable domMax

        const domMax: FeatureBundle;
        • Modifiers

          • @public

        variable domMin

        const domMin: FeatureBundle;
        • Modifiers

          • @public

        variable isBrowser

        const isBrowser: boolean;

          variable LayoutGroup

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

            variable LayoutGroupContext

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

              variable m

              const m: (<Props, TagName extends string = 'div'>(
              Component: any,
              { forwardMotionProps }?: { forwardMotionProps: boolean }
              ) => TagName extends
              | 'symbol'
              | keyof HTMLElements
              | 'animate'
              | 'circle'
              | 'defs'
              | 'desc'
              | 'ellipse'
              | 'g'
              | 'image'
              | 'line'
              | 'filter'
              | 'marker'
              | 'mask'
              | 'metadata'
              | 'path'
              | 'pattern'
              | 'polygon'
              | 'polyline'
              | 'rect'
              | 'stop'
              | 'svg'
              | 'switch'
              | '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'
              ? DOMMotionComponents[TagName]
              : React$1.ComponentType<
              Omit<MotionComponentProps<Props>, 'children'> & {
              children?: 'children' extends keyof Props
              ?
              | Props[keyof Props & 'children']
              | MotionComponentProps<Props>[keyof Props & 'children']
              : MotionComponentProps<Props>['children'];
              }
              >) &
              HTMLMotionComponents &
              SVGMotionComponents & {
              create: <Props, TagName extends string = 'div'>(
              Component: any,
              { forwardMotionProps }?: { forwardMotionProps: boolean }
              ) => TagName extends
              | 'symbol'
              | keyof HTMLElements
              | 'animate'
              | 'circle'
              | 'defs'
              | 'desc'
              | 'ellipse'
              | 'g'
              | 'image'
              | 'line'
              | 'filter'
              | 'marker'
              | 'mask'
              | 'metadata'
              | 'path'
              | 'pattern'
              | 'polygon'
              | 'polyline'
              | 'rect'
              | 'stop'
              | 'svg'
              | 'switch'
              | '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'
              ? DOMMotionComponents[TagName]
              : React$1.ComponentType<
              Omit<MotionComponentProps<Props>, 'children'> & {
              children?: 'children' extends keyof Props
              ?
              | Props[keyof Props & 'children']
              | MotionComponentProps<Props>[keyof Props &
              'children']
              : MotionComponentProps<Props>['children'];
              }
              >;
              };

                variable motion

                const motion: (<Props, TagName extends string = 'div'>(
                Component: any,
                { forwardMotionProps }?: { forwardMotionProps: boolean }
                ) => TagName extends
                | 'symbol'
                | keyof HTMLElements
                | 'animate'
                | 'circle'
                | 'defs'
                | 'desc'
                | 'ellipse'
                | 'g'
                | 'image'
                | 'line'
                | 'filter'
                | 'marker'
                | 'mask'
                | 'metadata'
                | 'path'
                | 'pattern'
                | 'polygon'
                | 'polyline'
                | 'rect'
                | 'stop'
                | 'svg'
                | 'switch'
                | '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'
                ? DOMMotionComponents[TagName]
                : React$1.ComponentType<
                Omit<MotionComponentProps<Props>, 'children'> & {
                children?: 'children' extends keyof Props
                ?
                | Props[keyof Props & 'children']
                | MotionComponentProps<Props>[keyof Props & 'children']
                : MotionComponentProps<Props>['children'];
                }
                >) &
                HTMLMotionComponents &
                SVGMotionComponents & {
                create: <Props, TagName extends string = 'div'>(
                Component: any,
                { forwardMotionProps }?: { forwardMotionProps: boolean }
                ) => TagName extends
                | 'symbol'
                | keyof HTMLElements
                | 'animate'
                | 'circle'
                | 'defs'
                | 'desc'
                | 'ellipse'
                | 'g'
                | 'image'
                | 'line'
                | 'filter'
                | 'marker'
                | 'mask'
                | 'metadata'
                | 'path'
                | 'pattern'
                | 'polygon'
                | 'polyline'
                | 'rect'
                | 'stop'
                | 'svg'
                | 'switch'
                | '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'
                ? DOMMotionComponents[TagName]
                : React$1.ComponentType<
                Omit<MotionComponentProps<Props>, 'children'> & {
                children?: 'children' extends keyof Props
                ?
                | Props[keyof Props & 'children']
                | MotionComponentProps<Props>[keyof Props &
                'children']
                : MotionComponentProps<Props>['children'];
                }
                >;
                };

                  variable MotionConfigContext

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

                    • @public

                  variable MotionContext

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

                    variable optimizedAppearDataAttribute

                    const optimizedAppearDataAttribute: string;

                      variable PresenceContext

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

                        • @public

                      variable SwitchLayoutGroupContext

                      const SwitchLayoutGroupContext: React$1.Context<SwitchLayoutGroupContext>;
                      • Internal, exported only for usage in Framer

                      variable useAnimation

                      const useAnimation: () => LegacyAnimationControls;

                        variable useIsomorphicLayoutEffect

                        const useIsomorphicLayoutEffect: any;

                          variable visualElementStore

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

                            Functions

                            function addPointerEvent

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

                              function addPointerInfo

                              addPointerInfo: (handler: EventListenerWithPointInfo) => EventListener;

                                function addScaleCorrector

                                addScaleCorrector: (correctors: ScaleCorrectorMap) => void;

                                  function animateMini

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

                                    function AnimatePresence

                                    AnimatePresence: ({
                                    children,
                                    custom,
                                    initial,
                                    onExitComplete,
                                    presenceAffectsLayout,
                                    mode,
                                    propagate,
                                    anchorX,
                                    }: React$1.PropsWithChildren<AnimatePresenceProps>) => react_jsx_runtime.JSX.Element | null;
                                    • AnimatePresence enables the animation of components that have been removed from the tree.

                                      When adding/removing more than a single child, every child **must** be given a unique key prop.

                                      Any motion components that have an exit property defined will animate out when removed from the tree.

                                      import { motion, AnimatePresence } from 'framer-motion'
                                      export const Items = ({ items }) => (
                                      <AnimatePresence>
                                      {items.map(item => (
                                      <motion.div
                                      key={item.id}
                                      initial={{ opacity: 0 }}
                                      animate={{ opacity: 1 }}
                                      exit={{ opacity: 0 }}
                                      />
                                      ))}
                                      </AnimatePresence>
                                      )

                                      You can sequence exit animations throughout a tree using variants.

                                      If a child contains multiple motion components with exit props, it will only unmount the child once all motion components have finished animating out. Likewise, any components using usePresence all need to call safeToRemove.

                                      Modifiers

                                      • @public

                                    function animateVisualElement

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

                                      function animationControls

                                      animationControls: () => LegacyAnimationControls;
                                      • Modifiers

                                        • @public

                                      function buildTransform

                                      buildTransform: (
                                      latestValues: ResolvedValues,
                                      transform: HTMLRenderState['transform'],
                                      transformTemplate?: any
                                      ) => string;
                                      • Build a CSS transform style from individual x/y/scale etc properties.

                                        This outputs with a default order of transforms/scales/rotations, this can be customised by providing a transformTemplate function.

                                      function calcLength

                                      calcLength: (axis: Axis) => number;

                                        function createBox

                                        createBox: () => Box;

                                          function createRendererMotionComponent

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

                                            This function accepts a Component argument, which can be either a string (ie "div" for motion.div), or an actual React component.

                                            Alongside this is a config option which provides a way of rendering the provided component "offline", or outside the React render cycle.

                                          function createScopedAnimate

                                          createScopedAnimate: (scope?: AnimationScope) => {
                                          (
                                          sequence: AnimationSequence,
                                          options?: SequenceOptions
                                          ): AnimationPlaybackControlsWithThen;
                                          (
                                          value: string | MotionValue<string>,
                                          keyframes: string | UnresolvedValueKeyframe<string>[],
                                          options?: ValueAnimationTransition<string>
                                          ): AnimationPlaybackControlsWithThen;
                                          (
                                          value: number | MotionValue<number>,
                                          keyframes: number | UnresolvedValueKeyframe<number>[],
                                          options?: ValueAnimationTransition<number>
                                          ): AnimationPlaybackControlsWithThen;
                                          <V extends string | number>(
                                          value: any,
                                          keyframes: V | UnresolvedValueKeyframe<V>[],
                                          options?: ValueAnimationTransition<V>
                                          ): AnimationPlaybackControlsWithThen;
                                          (
                                          element: ElementOrSelector,
                                          keyframes: DOMKeyframesDefinition,
                                          options?: AnimationOptions
                                          ): AnimationPlaybackControlsWithThen;
                                          <O extends {}>(
                                          object: O | O[],
                                          keyframes: ObjectTarget<O>,
                                          options?: AnimationOptions
                                          ): AnimationPlaybackControlsWithThen;
                                          };
                                          • Creates an animation function that is optionally scoped to a specific element.

                                          function delay

                                          delay: (callback: DelayedFunction, timeout: number) => () => void;
                                          • Timeout defined in ms

                                          function disableInstantTransitions

                                          disableInstantTransitions: () => void;

                                            function distance

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

                                              function distance2D

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

                                                function filterProps

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

                                                  function inView

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

                                                    function isMotionComponent

                                                    isMotionComponent: (component: React.ComponentType | string) => boolean;
                                                    • Checks if a component is a motion component.

                                                    function isValidMotionProp

                                                    isValidMotionProp: (key: string) => boolean;
                                                    • Check whether a prop name is a valid MotionProp key.

                                                      Parameter key

                                                      Name of the property to check

                                                      Returns

                                                      true is key is a valid MotionProp.

                                                      Modifiers

                                                      • @public

                                                    function LazyMotion

                                                    LazyMotion: ({
                                                    children,
                                                    features,
                                                    strict,
                                                    }: LazyProps) => react_jsx_runtime.JSX.Element;
                                                    • Used in conjunction with the m component to reduce bundle size.

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

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

                                                      // Synchronous loading
                                                      import { LazyMotion, m, domAnimation } from "framer-motion"
                                                      function App() {
                                                      return (
                                                      <LazyMotion features={domAnimation}>
                                                      <m.div animate={{ scale: 2 }} />
                                                      </LazyMotion>
                                                      )
                                                      }
                                                      // Asynchronous loading
                                                      import { LazyMotion, m } from "framer-motion"
                                                      function App() {
                                                      return (
                                                      <LazyMotion features={() => import('./path/to/domAnimation')}>
                                                      <m.div animate={{ scale: 2 }} />
                                                      </LazyMotion>
                                                      )
                                                      }

                                                      Modifiers

                                                      • @public

                                                    function makeUseVisualState

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

                                                      function 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 ReorderGroup

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

                                                        function ReorderGroupComponent

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

                                                          function ReorderItem

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

                                                            function ReorderItemComponent

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

                                                              function resolveMotionValue

                                                              resolveMotionValue: (value?: string | number | 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 | AnimationPlaybackControls,
                                                              { axis, container, ...options }?: ScrollOptions
                                                              ) => VoidFunction;

                                                                function scrollInfo

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

                                                                  function stagger

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

                                                                    function startOptimizedAppearAnimation

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

                                                                      function unwrapMotionComponent

                                                                      unwrapMotionComponent: (
                                                                      component: React.ComponentType | string
                                                                      ) => React.ComponentType | string | undefined;
                                                                      • Unwraps a motion component and returns either a string for motion.div or the React component for motion(Component).

                                                                        If the component is not a motion component it returns undefined.

                                                                      function useAnimate

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

                                                                        function useAnimateMini

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

                                                                          function useAnimationControls

                                                                          useAnimationControls: () => LegacyAnimationControls;
                                                                          • Creates LegacyAnimationControls, which can be used to manually start, stop and sequence animations on one or more components.

                                                                            The returned LegacyAnimationControls should be passed to the animate property of the components you want to animate.

                                                                            These components can then be animated with the start method.

                                                                            import * as React from 'react'
                                                                            import { motion, useAnimation } from 'framer-motion'
                                                                            export function MyComponent(props) {
                                                                            const controls = useAnimation()
                                                                            controls.start({
                                                                            x: 100,
                                                                            transition: { duration: 0.5 },
                                                                            })
                                                                            return <motion.div animate={controls} />
                                                                            }

                                                                            Returns

                                                                            Animation controller with start and stop methods

                                                                            Modifiers

                                                                            • @public

                                                                          function useAnimationFrame

                                                                          useAnimationFrame: (callback: FrameCallback) => void;

                                                                            function useCycle

                                                                            useCycle: <T>(...items: T[]) => CycleState<T>;
                                                                            • Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to useState in React. It is provided an initial array of possible states, and returns an array of two arguments.

                                                                              An index value can be passed to the returned cycle function to cycle to a specific index.

                                                                              import * as React from "react"
                                                                              import { motion, useCycle } from "framer-motion"
                                                                              export const MyComponent = () => {
                                                                              const [x, cycleX] = useCycle(0, 50, 100)
                                                                              return (
                                                                              <motion.div
                                                                              animate={{ x: x }}
                                                                              onTap={() => cycleX()}
                                                                              />
                                                                              )
                                                                              }

                                                                              Parameter items

                                                                              items to cycle through

                                                                              Returns

                                                                              [currentState, cycleState]

                                                                              Modifiers

                                                                              • @public

                                                                            function useDeprecatedAnimatedState

                                                                            useDeprecatedAnimatedState: (initialState: any) => any[];
                                                                            • This is not an officially supported API and may be removed on any version.

                                                                            function useDeprecatedInvertedScale

                                                                            useDeprecatedInvertedScale: (
                                                                            scale?: Partial<ScaleMotionValues>
                                                                            ) => ScaleMotionValues;
                                                                            • Returns a MotionValue each for scaleX and scaleY that update with the inverse of their respective parent scales.

                                                                              This is useful for undoing the distortion of content when scaling a parent component.

                                                                              By default, useInvertedScale will automatically fetch scaleX and scaleY from the nearest parent. By passing other MotionValues in as useInvertedScale({ scaleX, scaleY }), it will invert the output of those instead.

                                                                              const MyComponent = () => {
                                                                              const { scaleX, scaleY } = useInvertedScale()
                                                                              return <motion.div style={{ scaleX, scaleY }} />
                                                                              }

                                                                              Deprecated

                                                                            function useDomEvent

                                                                            useDomEvent: (
                                                                            ref: RefObject<EventTarget>,
                                                                            eventName: string,
                                                                            handler?: EventListener | undefined,
                                                                            options?: AddEventListenerOptions
                                                                            ) => void;
                                                                            • Attaches an event listener directly to the provided DOM element.

                                                                              Bypassing React's event system can be desirable, for instance when attaching non-passive event handlers.

                                                                              const ref = useRef(null)
                                                                              useDomEvent(ref, 'wheel', onWheel, { passive: false })
                                                                              return <div ref={ref} />

                                                                              Parameter ref

                                                                              React.RefObject that's been provided to the element you want to bind the listener to.

                                                                              Parameter eventName

                                                                              Name of the event you want listen for.

                                                                              Parameter handler

                                                                              Function to fire when receiving the event.

                                                                              Parameter options

                                                                              Options to pass to Event.addEventListener.

                                                                              Modifiers

                                                                              • @public

                                                                            function useDragControls

                                                                            useDragControls: () => DragControls;
                                                                            • Usually, dragging is initiated by pressing down on a motion component with a drag prop and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we might want to initiate that dragging from a different component than the draggable one.

                                                                              By creating a dragControls using the useDragControls hook, we can pass this into the draggable component's dragControls prop. It exposes a start method that can start dragging from pointer events on other components.

                                                                              const dragControls = useDragControls()
                                                                              function startDrag(event) {
                                                                              dragControls.start(event, { snapToCursor: true })
                                                                              }
                                                                              return (
                                                                              <>
                                                                              <div onPointerDown={startDrag} />
                                                                              <motion.div drag="x" dragControls={dragControls} />
                                                                              </>
                                                                              )

                                                                              Modifiers

                                                                              • @public

                                                                            function useElementScroll

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

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

                                                                            function useForceUpdate

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

                                                                              function useInstantLayoutTransition

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

                                                                                function useInstantTransition

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

                                                                                  function useInView

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

                                                                                    function useIsPresent

                                                                                    useIsPresent: () => boolean;
                                                                                    • Similar to usePresence, except useIsPresent simply returns whether or not the component is present. There is no safeToRemove function.

                                                                                      import { useIsPresent } from "framer-motion"
                                                                                      export const Component = () => {
                                                                                      const isPresent = useIsPresent()
                                                                                      useEffect(() => {
                                                                                      !isPresent && console.log("I've been removed!")
                                                                                      }, [isPresent])
                                                                                      return <div />
                                                                                      }

                                                                                      Modifiers

                                                                                      • @public

                                                                                    function useMotionTemplate

                                                                                    useMotionTemplate: (
                                                                                    fragments: TemplateStringsArray,
                                                                                    ...values: Array<MotionValue | number | string>
                                                                                    ) => MotionValue<string>;
                                                                                    • Combine multiple motion values into a new one using a string template literal.

                                                                                      import {
                                                                                      motion,
                                                                                      useSpring,
                                                                                      useMotionValue,
                                                                                      useMotionTemplate
                                                                                      } from "framer-motion"
                                                                                      function Component() {
                                                                                      const shadowX = useSpring(0)
                                                                                      const shadowY = useMotionValue(0)
                                                                                      const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`
                                                                                      return <motion.div style={{ filter: shadow }} />
                                                                                      }

                                                                                      Modifiers

                                                                                      • @public

                                                                                    function useMotionValue

                                                                                    useMotionValue: <T>(initial: T) => MotionValue<T>;
                                                                                    • Creates a MotionValue to track the state and velocity of a value.

                                                                                      Usually, these are created automatically. For advanced use-cases, like use with useTransform, you can create MotionValues externally and pass them into the animated component via the style prop.

                                                                                      export const MyComponent = () => {
                                                                                      const scale = useMotionValue(1)
                                                                                      return <motion.div style={{ scale }} />
                                                                                      }

                                                                                      Parameter initial

                                                                                      The initial state.

                                                                                      Modifiers

                                                                                      • @public

                                                                                    function useMotionValueEvent

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

                                                                                      function usePresence

                                                                                      usePresence: (subscribe?: boolean) => AlwaysPresent | Present | NotPresent;
                                                                                      • When a component is the child of AnimatePresence, it can use usePresence to access information about whether it's still present in the React tree.

                                                                                        import { usePresence } from "framer-motion"
                                                                                        export const Component = () => {
                                                                                        const [isPresent, safeToRemove] = usePresence()
                                                                                        useEffect(() => {
                                                                                        !isPresent && setTimeout(safeToRemove, 1000)
                                                                                        }, [isPresent])
                                                                                        return <div />
                                                                                        }

                                                                                        If isPresent is false, it means that a component has been removed the tree, but AnimatePresence won't really remove it until safeToRemove has been called.

                                                                                        Modifiers

                                                                                        • @public

                                                                                      function usePresenceData

                                                                                      usePresenceData: () => any;

                                                                                        function useReducedMotion

                                                                                        useReducedMotion: () => boolean | null;
                                                                                        • A hook that returns true if we should be using reduced motion based on the current device's Reduced Motion setting.

                                                                                          This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing x/y animations with opacity, disabling the autoplay of background videos, or turning off parallax motion.

                                                                                          It will actively respond to changes and re-render your components with the latest setting.

                                                                                          export function Sidebar({ isOpen }) {
                                                                                          const shouldReduceMotion = useReducedMotion()
                                                                                          const closedX = shouldReduceMotion ? 0 : "-100%"
                                                                                          return (
                                                                                          <motion.div animate={{
                                                                                          opacity: isOpen ? 1 : 0,
                                                                                          x: isOpen ? 0 : closedX
                                                                                          }} />
                                                                                          )
                                                                                          }

                                                                                          boolean

                                                                                          Modifiers

                                                                                          • @public

                                                                                        function useReducedMotionConfig

                                                                                        useReducedMotionConfig: () => boolean | null;

                                                                                          function useResetProjection

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

                                                                                            function useScroll

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

                                                                                              function useSpring

                                                                                              useSpring: {
                                                                                              (source: MotionValue<string>, options?: SpringOptions): MotionValue<string>;
                                                                                              (source: string, options?: SpringOptions): MotionValue<string>;
                                                                                              (source: MotionValue<number>, options?: SpringOptions): MotionValue<number>;
                                                                                              (source: number, options?: SpringOptions): MotionValue<number>;
                                                                                              };
                                                                                              • Creates a MotionValue that, when set, will use a spring animation to animate to its new state.

                                                                                                It can either work as a stand-alone MotionValue by initialising it with a value, or as a subscriber to another MotionValue.

                                                                                                Parameter inputValue

                                                                                                MotionValue or number. If provided a MotionValue, when the input MotionValue changes, the created MotionValue will spring towards that value.

                                                                                                Parameter springConfig

                                                                                                Configuration options for the spring.

                                                                                                Returns

                                                                                                MotionValue

                                                                                                Remarks

                                                                                                const x = useSpring(0, { stiffness: 300 })
                                                                                                const y = useSpring(x, { damping: 10 })

                                                                                                Modifiers

                                                                                                • @public

                                                                                              function useTime

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

                                                                                                function useTransform

                                                                                                useTransform: {
                                                                                                <I, O>(
                                                                                                value: MotionValue<number>,
                                                                                                inputRange: InputRange,
                                                                                                outputRange: O[],
                                                                                                options?: TransformOptions<O>
                                                                                                ): MotionValue<O>;
                                                                                                <I, O>(
                                                                                                input: MotionValue<I>,
                                                                                                transformer: SingleTransformer<I, O>
                                                                                                ): MotionValue<O>;
                                                                                                <I, O>(
                                                                                                input:
                                                                                                | MotionValue<string>[]
                                                                                                | MotionValue<number>[]
                                                                                                | MotionValue<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 Motion: numbers, colors, shadows, etc.

                                                                                                  Every value in the output range must be of the same type and in the same format.

                                                                                                  export const MyComponent = () => {
                                                                                                  const x = useMotionValue(0)
                                                                                                  const xRange = [-200, -100, 100, 200]
                                                                                                  const opacityRange = [0, 1, 1, 0]
                                                                                                  const opacity = useTransform(x, xRange, opacityRange)
                                                                                                  return (
                                                                                                  <motion.div
                                                                                                  animate={{ x: 200 }}
                                                                                                  style={{ opacity, x }}
                                                                                                  />
                                                                                                  )
                                                                                                  }

                                                                                                  Modifiers

                                                                                                  • @public
                                                                                                • Create a MotionValue that transforms the output of another MotionValue through a function. In this example, y will always be double x.

                                                                                                  export const MyComponent = () => {
                                                                                                  const x = useMotionValue(10)
                                                                                                  const y = useTransform(x, value => value * 2)
                                                                                                  return <motion.div style={{ x, y }} />
                                                                                                  }

                                                                                                  Parameter input

                                                                                                  A MotionValue that will pass its latest value through transform to update the returned MotionValue.

                                                                                                  Parameter transform

                                                                                                  A function that accepts the latest value from input and returns a new value.

                                                                                                  Returns

                                                                                                  MotionValue

                                                                                                  Modifiers

                                                                                                  • @public
                                                                                                • Pass an array of MotionValues and a function to combine them. In this example, z will be the x multiplied by y.

                                                                                                  export const MyComponent = () => {
                                                                                                  const x = useMotionValue(0)
                                                                                                  const y = useMotionValue(0)
                                                                                                  const z = useTransform([x, y], ([latestX, latestY]) => latestX * latestY)
                                                                                                  return <motion.div style={{ x, y, z }} />
                                                                                                  }

                                                                                                  Parameter input

                                                                                                  An array of MotionValues that will pass their latest values through transform to update the returned MotionValue.

                                                                                                  Parameter transform

                                                                                                  A function that accepts the latest values from input and returns a new value.

                                                                                                  Returns

                                                                                                  MotionValue

                                                                                                  Modifiers

                                                                                                  • @public

                                                                                                function useUnmountEffect

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

                                                                                                  function useVelocity

                                                                                                  useVelocity: (value: MotionValue<number>) => MotionValue<number>;
                                                                                                  • Creates a MotionValue that updates when the velocity of the provided MotionValue changes.

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

                                                                                                    Modifiers

                                                                                                    • @public

                                                                                                  function useViewportScroll

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

                                                                                                    useViewportScroll is deprecated. Convert to useScroll()

                                                                                                  function useWillChange

                                                                                                  useWillChange: () => WillChange;

                                                                                                    Classes

                                                                                                    class DragControls

                                                                                                    class DragControls {}
                                                                                                    • Can manually trigger a drag gesture on one or more drag-enabled motion components.

                                                                                                      const dragControls = useDragControls()
                                                                                                      function startDrag(event) {
                                                                                                      dragControls.start(event, { snapToCursor: true })
                                                                                                      }
                                                                                                      return (
                                                                                                      <>
                                                                                                      <div onPointerDown={startDrag} />
                                                                                                      <motion.div drag="x" dragControls={dragControls} />
                                                                                                      </>
                                                                                                      )

                                                                                                      Modifiers

                                                                                                      • @public

                                                                                                    method start

                                                                                                    start: (
                                                                                                    event: React$1.PointerEvent | PointerEvent,
                                                                                                    options?: DragControlOptions
                                                                                                    ) => void;
                                                                                                    • Start a drag gesture on every motion component that has this set of drag controls passed into it via the dragControls prop.

                                                                                                      dragControls.start(e, {
                                                                                                      snapToCursor: true
                                                                                                      })

                                                                                                      Parameter event

                                                                                                      PointerEvent

                                                                                                      Parameter options

                                                                                                      Options

                                                                                                      Modifiers

                                                                                                      • @public

                                                                                                    class FlatTree

                                                                                                    class FlatTree {}

                                                                                                      method add

                                                                                                      add: (child: WithDepth) => void;

                                                                                                        method forEach

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

                                                                                                          method remove

                                                                                                          remove: (child: WithDepth) => void;

                                                                                                            class VisualElement

                                                                                                            abstract class VisualElement<
                                                                                                            Instance = unknown,
                                                                                                            RenderState = unknown,
                                                                                                            Options extends {} = {}
                                                                                                            > {}
                                                                                                            • A VisualElement is an imperative abstraction around UI elements such as HTMLElement, SVGElement, Three.Object3D etc.

                                                                                                            constructor

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

                                                                                                              property animationState

                                                                                                              animationState?: AnimationState;
                                                                                                              • The AnimationState, this is hydrated by the animation Feature.

                                                                                                              property blockInitialAnimation

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

                                                                                                              property children

                                                                                                              children: Set<VisualElement<unknown, unknown, {}>>;
                                                                                                              • A set containing references to this VisualElement's children.

                                                                                                              property current

                                                                                                              current: {};
                                                                                                              • A reference to the current underlying Instance, e.g. a HTMLElement or Three.Mesh etc.

                                                                                                              property depth

                                                                                                              depth: number;
                                                                                                              • The depth of this VisualElement within the overall VisualElement tree.

                                                                                                              property isControllingVariants

                                                                                                              isControllingVariants: boolean;

                                                                                                                property isVariantNode

                                                                                                                isVariantNode: boolean;
                                                                                                                • Determine what role this visual element should take in the variant tree.

                                                                                                                property KeyframeResolver

                                                                                                                KeyframeResolver: any;

                                                                                                                  property latestValues

                                                                                                                  latestValues: ResolvedValues;
                                                                                                                  • An object containing the latest static values for each of this VisualElement's MotionValues.

                                                                                                                  property manuallyAnimateOnMount

                                                                                                                  manuallyAnimateOnMount: boolean;
                                                                                                                  • Normally, if a component is controlled by a parent's variants, it can rely on that ancestor to trigger animations further down the tree. However, if a component is created after its parent is mounted, the parent won't trigger that mount animation so the child needs to.

                                                                                                                    TODO: This might be better replaced with a method isParentMounted

                                                                                                                  property notifyUpdate

                                                                                                                  notifyUpdate: () => void;

                                                                                                                    property options

                                                                                                                    readonly options: {};
                                                                                                                    • The options used to create this VisualElement. The Options type is defined by the inheriting VisualElement and is passed straight through to the render functions.

                                                                                                                    property parent

                                                                                                                    parent: VisualElement<unknown, unknown, {}>;
                                                                                                                    • A reference to the parent VisualElement (if exists).

                                                                                                                    property presenceContext

                                                                                                                    presenceContext: PresenceContextProps;

                                                                                                                      property prevPresenceContext

                                                                                                                      prevPresenceContext?: PresenceContextProps;

                                                                                                                        property prevProps

                                                                                                                        prevProps?: MotionProps;

                                                                                                                          property projection

                                                                                                                          projection?: IProjectionNode<unknown>;
                                                                                                                          • A reference to this VisualElement's projection node, used in layout animations.

                                                                                                                          property props

                                                                                                                          props: MotionProps;
                                                                                                                          • A reference to the latest props provided to the VisualElement's host React component.

                                                                                                                          property render

                                                                                                                          render: () => void;

                                                                                                                            property renderState

                                                                                                                            renderState: {};
                                                                                                                            • The current render state of this VisualElement. Defined by inherting VisualElements.

                                                                                                                            property scheduleRender

                                                                                                                            scheduleRender: () => void;

                                                                                                                              property shouldReduceMotion

                                                                                                                              shouldReduceMotion: boolean;
                                                                                                                              • Decides whether this VisualElement should animate in reduced motion mode.

                                                                                                                                TODO: This is currently set on every individual VisualElement but feels like it could be set globally.

                                                                                                                              property type

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

                                                                                                                              property values

                                                                                                                              values: Map<string, MotionValue<any>>;
                                                                                                                              • A map of all motion values attached to this visual element. Motion values are source of truth for any given animated value. A motion value might be provided externally by the component via props.

                                                                                                                              property variantChildren

                                                                                                                              variantChildren?: Set<VisualElement<unknown, unknown, {}>>;
                                                                                                                              • If this component is part of the variant tree, it should track any children that are also part of the tree. This is essentially a shadow tree to simplify logic around how to stagger over children.

                                                                                                                              method addValue

                                                                                                                              addValue: (key: string, value: MotionValue) => void;
                                                                                                                              • Add a motion value and bind it to this visual element.

                                                                                                                              method addVariantChild

                                                                                                                              addVariantChild: (child: VisualElement) => (() => boolean) | undefined;
                                                                                                                              • Add a child visual element to our set of children.

                                                                                                                              method build

                                                                                                                              abstract build: (
                                                                                                                              renderState: RenderState,
                                                                                                                              latestValues: ResolvedValues,
                                                                                                                              props: MotionProps
                                                                                                                              ) => void;
                                                                                                                              • Run before a React or VisualElement render, builds the latest motion values into an Instance-specific format. For example, HTMLVisualElement will use this step to build style and var values.

                                                                                                                              method getBaseTarget

                                                                                                                              getBaseTarget: (key: string) => ResolvedValues[string] | undefined | null;
                                                                                                                              • Find the base target for a value thats been removed from all animation props.

                                                                                                                              method getBaseTargetFromProps

                                                                                                                              abstract getBaseTargetFromProps: (
                                                                                                                              props: MotionProps,
                                                                                                                              key: string
                                                                                                                              ) => string | number | undefined | MotionValue;
                                                                                                                              • When a value has been removed from all animation props we need to pick a target to animate back to. For instance, for HTMLElements we can look in the style prop.

                                                                                                                              method getClosestVariantNode

                                                                                                                              getClosestVariantNode: () => VisualElement | undefined;

                                                                                                                                method getDefaultTransition

                                                                                                                                getDefaultTransition: () => motion_dom.Transition<any> | 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;
                                                                                                                                      };
                                                                                                                                      • Get a motion value for this key. If called with a default value, we'll create one if none exists.

                                                                                                                                      method getVariant

                                                                                                                                      getVariant: (name: string) => motion_dom.Variant | undefined;
                                                                                                                                      • Returns the variant definition with a given name.

                                                                                                                                      method handleChildMotionValue

                                                                                                                                      handleChildMotionValue: () => void;
                                                                                                                                      • If the component child is provided as a motion value, handle subscriptions with the renderer-specific VisualElement.

                                                                                                                                      method hasValue

                                                                                                                                      hasValue: (key: string) => boolean;
                                                                                                                                      • Check whether we have a motion value for this key

                                                                                                                                      method measureInstanceViewportBox

                                                                                                                                      abstract measureInstanceViewportBox: (
                                                                                                                                      instance: Instance,
                                                                                                                                      props: MotionProps & Partial<MotionConfigContext>
                                                                                                                                      ) => Box;
                                                                                                                                      • Measure the viewport-relative bounding box of the Instance.

                                                                                                                                      method measureViewportBox

                                                                                                                                      measureViewportBox: () => Box;
                                                                                                                                      • Measure the current viewport box with or without transforms. Only measures axis-aligned boxes, rotate and skew must be manually removed with a re-render to work.

                                                                                                                                      method mount

                                                                                                                                      mount: (instance: Instance) => void;

                                                                                                                                        method notify

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

                                                                                                                                          method on

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

                                                                                                                                            method onBindTransform

                                                                                                                                            onBindTransform: () => void;
                                                                                                                                            • This method is called when a transform property is bound to a motion value. It's currently used to measure SVG elements when a new transform property is bound.

                                                                                                                                            method readValue

                                                                                                                                            readValue: (key: string, target?: 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]: 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;

                                                                                                                                                      class WillChangeMotionValue

                                                                                                                                                      class WillChangeMotionValue extends MotionValue<string> implements WillChange {}

                                                                                                                                                        method add

                                                                                                                                                        add: (name: string) => void;

                                                                                                                                                          Interfaces

                                                                                                                                                          interface AbsoluteKeyframe

                                                                                                                                                          interface AbsoluteKeyframe {}

                                                                                                                                                            property at

                                                                                                                                                            at: number;

                                                                                                                                                              property easing

                                                                                                                                                              easing?: Easing;

                                                                                                                                                                property value

                                                                                                                                                                value: string | number | null;

                                                                                                                                                                  interface AnimatePresenceProps

                                                                                                                                                                  interface AnimatePresenceProps {}
                                                                                                                                                                  • Modifiers

                                                                                                                                                                    • @public

                                                                                                                                                                  property anchorX

                                                                                                                                                                  anchorX?: 'left' | 'right';
                                                                                                                                                                  • Internal. Set whether to anchor the x position of the exiting element to the left or right when using mode="popLayout".

                                                                                                                                                                  property custom

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

                                                                                                                                                                    Modifiers

                                                                                                                                                                    • @public

                                                                                                                                                                  property initial

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

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

                                                                                                                                                                    Modifiers

                                                                                                                                                                    • @public

                                                                                                                                                                  property mode

                                                                                                                                                                  mode?: 'sync' | 'popLayout' | 'wait';
                                                                                                                                                                  • Determines how to handle entering and exiting elements.

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

                                                                                                                                                                    Modifiers

                                                                                                                                                                    • @public

                                                                                                                                                                  property onExitComplete

                                                                                                                                                                  onExitComplete?: () => void;
                                                                                                                                                                  • Fires when all exiting nodes have completed animating out.

                                                                                                                                                                    Modifiers

                                                                                                                                                                    • @public

                                                                                                                                                                  property presenceAffectsLayout

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

                                                                                                                                                                  property propagate

                                                                                                                                                                  propagate?: boolean;
                                                                                                                                                                  • If true, the AnimatePresence component will propagate parent exit animations to its children.

                                                                                                                                                                  interface At

                                                                                                                                                                  interface At {}

                                                                                                                                                                    property at

                                                                                                                                                                    at?: SequenceTime;

                                                                                                                                                                      interface FeatureBundle

                                                                                                                                                                      interface FeatureBundle extends FeaturePackages {}

                                                                                                                                                                        property renderer

                                                                                                                                                                        renderer: CreateVisualElement<any>;

                                                                                                                                                                          interface HydratedFeatureDefinitions

                                                                                                                                                                          interface HydratedFeatureDefinitions {}

                                                                                                                                                                            property animation

                                                                                                                                                                            animation?: HydratedFeatureDefinition;

                                                                                                                                                                              property drag

                                                                                                                                                                              drag?: HydratedFeatureDefinition;

                                                                                                                                                                                property exit

                                                                                                                                                                                exit?: HydratedFeatureDefinition;

                                                                                                                                                                                  property focus

                                                                                                                                                                                  focus?: HydratedFeatureDefinition;

                                                                                                                                                                                    property hover

                                                                                                                                                                                    hover?: HydratedFeatureDefinition;

                                                                                                                                                                                      property inView

                                                                                                                                                                                      inView?: HydratedFeatureDefinition;

                                                                                                                                                                                        property layout

                                                                                                                                                                                        layout?: HydratedFeatureDefinition;

                                                                                                                                                                                          property pan

                                                                                                                                                                                          pan?: HydratedFeatureDefinition;

                                                                                                                                                                                            property tap

                                                                                                                                                                                            tap?: HydratedFeatureDefinition;

                                                                                                                                                                                              interface IProjectionNode

                                                                                                                                                                                              interface IProjectionNode<I = unknown> {}

                                                                                                                                                                                                property animationId

                                                                                                                                                                                                animationId: number;

                                                                                                                                                                                                  property animationValues

                                                                                                                                                                                                  animationValues?: ResolvedValues;

                                                                                                                                                                                                    property children

                                                                                                                                                                                                    children: Set<IProjectionNode>;

                                                                                                                                                                                                      property currentAnimation

                                                                                                                                                                                                      currentAnimation?: JSAnimation<number>;

                                                                                                                                                                                                        property depth

                                                                                                                                                                                                        depth: number;

                                                                                                                                                                                                          property hasCheckedOptimisedAppear

                                                                                                                                                                                                          hasCheckedOptimisedAppear: boolean;

                                                                                                                                                                                                            property hasTreeAnimated

                                                                                                                                                                                                            hasTreeAnimated: boolean;

                                                                                                                                                                                                              property id

                                                                                                                                                                                                              id: number;

                                                                                                                                                                                                                property instance

                                                                                                                                                                                                                instance: I | undefined;

                                                                                                                                                                                                                  property isAnimationBlocked

                                                                                                                                                                                                                  isAnimationBlocked?: boolean;

                                                                                                                                                                                                                    property isLayoutDirty

                                                                                                                                                                                                                    isLayoutDirty: boolean;

                                                                                                                                                                                                                      property isPresent

                                                                                                                                                                                                                      isPresent?: boolean;

                                                                                                                                                                                                                        property isProjectionDirty

                                                                                                                                                                                                                        isProjectionDirty: boolean;

                                                                                                                                                                                                                          property isSharedProjectionDirty

                                                                                                                                                                                                                          isSharedProjectionDirty: boolean;

                                                                                                                                                                                                                            property isTransformDirty

                                                                                                                                                                                                                            isTransformDirty: boolean;

                                                                                                                                                                                                                              property isTreeAnimating

                                                                                                                                                                                                                              isTreeAnimating?: boolean;

                                                                                                                                                                                                                                property isTreeAnimationBlocked

                                                                                                                                                                                                                                isTreeAnimationBlocked: () => boolean;

                                                                                                                                                                                                                                  property isUpdating

                                                                                                                                                                                                                                  isUpdating: boolean;

                                                                                                                                                                                                                                    property isVisible

                                                                                                                                                                                                                                    isVisible: boolean;

                                                                                                                                                                                                                                      property latestValues

                                                                                                                                                                                                                                      latestValues: ResolvedValues;

                                                                                                                                                                                                                                        property layout

                                                                                                                                                                                                                                        layout?: Measurements;

                                                                                                                                                                                                                                          property mount

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

                                                                                                                                                                                                                                            property needsReset

                                                                                                                                                                                                                                            needsReset: boolean;

                                                                                                                                                                                                                                              property nodes

                                                                                                                                                                                                                                              nodes?: FlatTree;

                                                                                                                                                                                                                                                property options

                                                                                                                                                                                                                                                options: ProjectionNodeOptions;

                                                                                                                                                                                                                                                  property parent

                                                                                                                                                                                                                                                  parent?: IProjectionNode;

                                                                                                                                                                                                                                                    property path

                                                                                                                                                                                                                                                    path: IProjectionNode[];

                                                                                                                                                                                                                                                      property preserveOpacity

                                                                                                                                                                                                                                                      preserveOpacity?: boolean;

                                                                                                                                                                                                                                                        property prevTransformTemplateValue

                                                                                                                                                                                                                                                        prevTransformTemplateValue: string | undefined;

                                                                                                                                                                                                                                                          property projectionDelta

                                                                                                                                                                                                                                                          projectionDelta?: Delta;

                                                                                                                                                                                                                                                            property projectionDeltaWithTransform

                                                                                                                                                                                                                                                            projectionDeltaWithTransform?: Delta;

                                                                                                                                                                                                                                                              property relativeParent

                                                                                                                                                                                                                                                              relativeParent?: IProjectionNode;

                                                                                                                                                                                                                                                                property relativeTarget

                                                                                                                                                                                                                                                                relativeTarget?: Box;

                                                                                                                                                                                                                                                                  property relativeTargetOrigin

                                                                                                                                                                                                                                                                  relativeTargetOrigin?: Box;

                                                                                                                                                                                                                                                                    property resolvedRelativeTargetAt

                                                                                                                                                                                                                                                                    resolvedRelativeTargetAt?: number;

                                                                                                                                                                                                                                                                      property resumeFrom

                                                                                                                                                                                                                                                                      resumeFrom?: IProjectionNode;

                                                                                                                                                                                                                                                                        property resumingFrom

                                                                                                                                                                                                                                                                        resumingFrom?: IProjectionNode;

                                                                                                                                                                                                                                                                          property root

                                                                                                                                                                                                                                                                          root?: IProjectionNode;

                                                                                                                                                                                                                                                                            property scroll

                                                                                                                                                                                                                                                                            scroll?: ScrollMeasurements;

                                                                                                                                                                                                                                                                              property sharedNodes

                                                                                                                                                                                                                                                                              sharedNodes: Map<string, NodeStack>;

                                                                                                                                                                                                                                                                                property shouldResetTransform

                                                                                                                                                                                                                                                                                shouldResetTransform: boolean;

                                                                                                                                                                                                                                                                                  property snapshot

                                                                                                                                                                                                                                                                                  snapshot?: Measurements;

                                                                                                                                                                                                                                                                                    property target

                                                                                                                                                                                                                                                                                    target?: Box;

                                                                                                                                                                                                                                                                                      property targetDelta

                                                                                                                                                                                                                                                                                      targetDelta?: Delta;

                                                                                                                                                                                                                                                                                        property targetWithTransforms

                                                                                                                                                                                                                                                                                        targetWithTransforms?: Box;

                                                                                                                                                                                                                                                                                          property treeScale

                                                                                                                                                                                                                                                                                          treeScale?: Point;

                                                                                                                                                                                                                                                                                            property unmount

                                                                                                                                                                                                                                                                                            unmount: () => void;

                                                                                                                                                                                                                                                                                              property updateBlockedByResize

                                                                                                                                                                                                                                                                                              updateBlockedByResize: boolean;

                                                                                                                                                                                                                                                                                                property updateManuallyBlocked

                                                                                                                                                                                                                                                                                                updateManuallyBlocked: boolean;

                                                                                                                                                                                                                                                                                                  method addEventListener

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

                                                                                                                                                                                                                                                                                                    method applyTransform

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

                                                                                                                                                                                                                                                                                                      method blockUpdate

                                                                                                                                                                                                                                                                                                      blockUpdate: () => void;

                                                                                                                                                                                                                                                                                                        method calcProjection

                                                                                                                                                                                                                                                                                                        calcProjection: () => void;

                                                                                                                                                                                                                                                                                                          method checkUpdateFailed

                                                                                                                                                                                                                                                                                                          checkUpdateFailed: () => void;

                                                                                                                                                                                                                                                                                                            method clearMeasurements

                                                                                                                                                                                                                                                                                                            clearMeasurements: () => void;

                                                                                                                                                                                                                                                                                                              method clearSnapshot

                                                                                                                                                                                                                                                                                                              clearSnapshot: () => void;

                                                                                                                                                                                                                                                                                                                method didUpdate

                                                                                                                                                                                                                                                                                                                didUpdate: () => void;

                                                                                                                                                                                                                                                                                                                  method finishAnimation

                                                                                                                                                                                                                                                                                                                  finishAnimation: () => void;

                                                                                                                                                                                                                                                                                                                    method getClosestProjectingParent

                                                                                                                                                                                                                                                                                                                    getClosestProjectingParent: () => IProjectionNode | undefined;

                                                                                                                                                                                                                                                                                                                      method getProjectionStyles

                                                                                                                                                                                                                                                                                                                      getProjectionStyles: (styleProp?: MotionStyle) => MotionStyle | undefined;

                                                                                                                                                                                                                                                                                                                        method getStack

                                                                                                                                                                                                                                                                                                                        getStack: () => NodeStack | undefined;

                                                                                                                                                                                                                                                                                                                          method hasListeners

                                                                                                                                                                                                                                                                                                                          hasListeners: (name: LayoutEvents) => boolean;

                                                                                                                                                                                                                                                                                                                            method hide

                                                                                                                                                                                                                                                                                                                            hide: () => void;

                                                                                                                                                                                                                                                                                                                              method isLead

                                                                                                                                                                                                                                                                                                                              isLead: () => boolean;

                                                                                                                                                                                                                                                                                                                                method isProjecting

                                                                                                                                                                                                                                                                                                                                isProjecting: () => boolean;

                                                                                                                                                                                                                                                                                                                                  method isUpdateBlocked

                                                                                                                                                                                                                                                                                                                                  isUpdateBlocked: () => boolean;

                                                                                                                                                                                                                                                                                                                                    method measure

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

                                                                                                                                                                                                                                                                                                                                      method measurePageBox

                                                                                                                                                                                                                                                                                                                                      measurePageBox: () => Box;

                                                                                                                                                                                                                                                                                                                                        method notifyListeners

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

                                                                                                                                                                                                                                                                                                                                          method promote

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

                                                                                                                                                                                                                                                                                                                                            method registerSharedNode

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

                                                                                                                                                                                                                                                                                                                                              method relegate

                                                                                                                                                                                                                                                                                                                                              relegate: () => boolean;

                                                                                                                                                                                                                                                                                                                                                method resetSkewAndRotation

                                                                                                                                                                                                                                                                                                                                                resetSkewAndRotation: () => void;

                                                                                                                                                                                                                                                                                                                                                  method resetTransform

                                                                                                                                                                                                                                                                                                                                                  resetTransform: () => void;

                                                                                                                                                                                                                                                                                                                                                    method resetTree

                                                                                                                                                                                                                                                                                                                                                    resetTree: () => void;

                                                                                                                                                                                                                                                                                                                                                      method resolveTargetDelta

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

                                                                                                                                                                                                                                                                                                                                                        method scheduleCheckAfterUnmount

                                                                                                                                                                                                                                                                                                                                                        scheduleCheckAfterUnmount: () => void;

                                                                                                                                                                                                                                                                                                                                                          method scheduleRender

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

                                                                                                                                                                                                                                                                                                                                                            method scheduleUpdateProjection

                                                                                                                                                                                                                                                                                                                                                            scheduleUpdateProjection: () => void;

                                                                                                                                                                                                                                                                                                                                                              method setAnimationOrigin

                                                                                                                                                                                                                                                                                                                                                              setAnimationOrigin: (delta: Delta) => void;

                                                                                                                                                                                                                                                                                                                                                                method setOptions

                                                                                                                                                                                                                                                                                                                                                                setOptions: (options: ProjectionNodeOptions) => void;

                                                                                                                                                                                                                                                                                                                                                                  method setTargetDelta

                                                                                                                                                                                                                                                                                                                                                                  setTargetDelta: (delta: Delta) => void;

                                                                                                                                                                                                                                                                                                                                                                    method show

                                                                                                                                                                                                                                                                                                                                                                    show: () => void;

                                                                                                                                                                                                                                                                                                                                                                      method startAnimation

                                                                                                                                                                                                                                                                                                                                                                      startAnimation: (transition: ValueTransition) => void;

                                                                                                                                                                                                                                                                                                                                                                        method startUpdate

                                                                                                                                                                                                                                                                                                                                                                        startUpdate: () => void;

                                                                                                                                                                                                                                                                                                                                                                          method unblockUpdate

                                                                                                                                                                                                                                                                                                                                                                          unblockUpdate: () => void;

                                                                                                                                                                                                                                                                                                                                                                            method updateLayout

                                                                                                                                                                                                                                                                                                                                                                            updateLayout: () => void;

                                                                                                                                                                                                                                                                                                                                                                              method updateScroll

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

                                                                                                                                                                                                                                                                                                                                                                                method updateSnapshot

                                                                                                                                                                                                                                                                                                                                                                                updateSnapshot: () => void;

                                                                                                                                                                                                                                                                                                                                                                                  method willUpdate

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

                                                                                                                                                                                                                                                                                                                                                                                    interface LazyProps

                                                                                                                                                                                                                                                                                                                                                                                    interface LazyProps {}
                                                                                                                                                                                                                                                                                                                                                                                    • Modifiers

                                                                                                                                                                                                                                                                                                                                                                                      • @public

                                                                                                                                                                                                                                                                                                                                                                                    property children

                                                                                                                                                                                                                                                                                                                                                                                    children?: React.ReactNode;

                                                                                                                                                                                                                                                                                                                                                                                      property features

                                                                                                                                                                                                                                                                                                                                                                                      features: FeatureBundle | LazyFeatureBundle;
                                                                                                                                                                                                                                                                                                                                                                                      • Can be used to provide a feature bundle synchronously or asynchronously.

                                                                                                                                                                                                                                                                                                                                                                                        // features.js
                                                                                                                                                                                                                                                                                                                                                                                        import { domAnimation } from "framer-motion"
                                                                                                                                                                                                                                                                                                                                                                                        export default domAnimation
                                                                                                                                                                                                                                                                                                                                                                                        // index.js
                                                                                                                                                                                                                                                                                                                                                                                        import { LazyMotion, m } from "framer-motion"
                                                                                                                                                                                                                                                                                                                                                                                        const loadFeatures = import("./features.js")
                                                                                                                                                                                                                                                                                                                                                                                        .then(res => res.default)
                                                                                                                                                                                                                                                                                                                                                                                        function Component() {
                                                                                                                                                                                                                                                                                                                                                                                        return (
                                                                                                                                                                                                                                                                                                                                                                                        <LazyMotion features={loadFeatures}>
                                                                                                                                                                                                                                                                                                                                                                                        <m.div animate={{ scale: 1.5 }} />
                                                                                                                                                                                                                                                                                                                                                                                        </LazyMotion>
                                                                                                                                                                                                                                                                                                                                                                                        )
                                                                                                                                                                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                                                                                                                                                                        Modifiers

                                                                                                                                                                                                                                                                                                                                                                                        • @public

                                                                                                                                                                                                                                                                                                                                                                                      property strict

                                                                                                                                                                                                                                                                                                                                                                                      strict?: boolean;
                                                                                                                                                                                                                                                                                                                                                                                      • If true, will throw an error if a motion component renders within a LazyMotion component.

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

                                                                                                                                                                                                                                                                                                                                                                                        Modifiers

                                                                                                                                                                                                                                                                                                                                                                                        • @public

                                                                                                                                                                                                                                                                                                                                                                                      interface MotionConfigContext

                                                                                                                                                                                                                                                                                                                                                                                      interface MotionConfigContext {}
                                                                                                                                                                                                                                                                                                                                                                                      • Modifiers

                                                                                                                                                                                                                                                                                                                                                                                        • @public

                                                                                                                                                                                                                                                                                                                                                                                      property isStatic

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

                                                                                                                                                                                                                                                                                                                                                                                      property nonce

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

                                                                                                                                                                                                                                                                                                                                                                                        Modifiers

                                                                                                                                                                                                                                                                                                                                                                                        • @public

                                                                                                                                                                                                                                                                                                                                                                                      property reducedMotion

                                                                                                                                                                                                                                                                                                                                                                                      reducedMotion?: ReducedMotionConfig;
                                                                                                                                                                                                                                                                                                                                                                                      • If true, will respect the device prefersReducedMotion setting by switching transform animations off.

                                                                                                                                                                                                                                                                                                                                                                                        Modifiers

                                                                                                                                                                                                                                                                                                                                                                                        • @public

                                                                                                                                                                                                                                                                                                                                                                                      property transformPagePoint

                                                                                                                                                                                                                                                                                                                                                                                      transformPagePoint: TransformPoint;
                                                                                                                                                                                                                                                                                                                                                                                      • Internal, exported only for usage in Framer

                                                                                                                                                                                                                                                                                                                                                                                      property transition

                                                                                                                                                                                                                                                                                                                                                                                      transition?: Transition;
                                                                                                                                                                                                                                                                                                                                                                                      • Defines a new default transition for the entire tree.

                                                                                                                                                                                                                                                                                                                                                                                        Modifiers

                                                                                                                                                                                                                                                                                                                                                                                        • @public

                                                                                                                                                                                                                                                                                                                                                                                      interface MotionConfigProps

                                                                                                                                                                                                                                                                                                                                                                                      interface MotionConfigProps extends Partial<MotionConfigContext> {}

                                                                                                                                                                                                                                                                                                                                                                                        property children

                                                                                                                                                                                                                                                                                                                                                                                        children?: React$1.ReactNode;

                                                                                                                                                                                                                                                                                                                                                                                          property isValidProp

                                                                                                                                                                                                                                                                                                                                                                                          isValidProp?: IsValidProp;

                                                                                                                                                                                                                                                                                                                                                                                            interface MotionProps

                                                                                                                                                                                                                                                                                                                                                                                            interface MotionProps extends MotionNodeOptions {}
                                                                                                                                                                                                                                                                                                                                                                                            • Props for motion components.

                                                                                                                                                                                                                                                                                                                                                                                              Modifiers

                                                                                                                                                                                                                                                                                                                                                                                              • @public

                                                                                                                                                                                                                                                                                                                                                                                            property children

                                                                                                                                                                                                                                                                                                                                                                                            children?: React.ReactNode | MotionValue<number> | MotionValue<string>;

                                                                                                                                                                                                                                                                                                                                                                                              property style

                                                                                                                                                                                                                                                                                                                                                                                              style?: MotionStyle;
                                                                                                                                                                                                                                                                                                                                                                                              • The React DOM style prop, enhanced with support for MotionValues and separate transform values.

                                                                                                                                                                                                                                                                                                                                                                                                export const MyComponent = () => {
                                                                                                                                                                                                                                                                                                                                                                                                const x = useMotionValue(0)
                                                                                                                                                                                                                                                                                                                                                                                                return <motion.div style={{ x, opacity: 1, scale: 0.5 }} />
                                                                                                                                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                                                                                                                              interface ResolvedValues

                                                                                                                                                                                                                                                                                                                                                                                              interface ResolvedValues {}
                                                                                                                                                                                                                                                                                                                                                                                              • A generic set of string/number values

                                                                                                                                                                                                                                                                                                                                                                                              index signature

                                                                                                                                                                                                                                                                                                                                                                                              [key: string]: string | number;

                                                                                                                                                                                                                                                                                                                                                                                                interface ScrollMotionValues

                                                                                                                                                                                                                                                                                                                                                                                                interface ScrollMotionValues {}
                                                                                                                                                                                                                                                                                                                                                                                                • Modifiers

                                                                                                                                                                                                                                                                                                                                                                                                  • @public

                                                                                                                                                                                                                                                                                                                                                                                                property scrollX

                                                                                                                                                                                                                                                                                                                                                                                                scrollX: MotionValue<number>;

                                                                                                                                                                                                                                                                                                                                                                                                  property scrollXProgress

                                                                                                                                                                                                                                                                                                                                                                                                  scrollXProgress: MotionValue<number>;

                                                                                                                                                                                                                                                                                                                                                                                                    property scrollY

                                                                                                                                                                                                                                                                                                                                                                                                    scrollY: MotionValue<number>;

                                                                                                                                                                                                                                                                                                                                                                                                      property scrollYProgress

                                                                                                                                                                                                                                                                                                                                                                                                      scrollYProgress: MotionValue<number>;

                                                                                                                                                                                                                                                                                                                                                                                                        interface SequenceLabelWithTime

                                                                                                                                                                                                                                                                                                                                                                                                        interface SequenceLabelWithTime {}

                                                                                                                                                                                                                                                                                                                                                                                                          property at

                                                                                                                                                                                                                                                                                                                                                                                                          at: SequenceTime;

                                                                                                                                                                                                                                                                                                                                                                                                            property name

                                                                                                                                                                                                                                                                                                                                                                                                            name: SequenceLabel;

                                                                                                                                                                                                                                                                                                                                                                                                              interface SequenceMap

                                                                                                                                                                                                                                                                                                                                                                                                              interface SequenceMap {}

                                                                                                                                                                                                                                                                                                                                                                                                                index signature

                                                                                                                                                                                                                                                                                                                                                                                                                [key: string]: ValueSequence;

                                                                                                                                                                                                                                                                                                                                                                                                                  interface SequenceOptions

                                                                                                                                                                                                                                                                                                                                                                                                                  interface SequenceOptions extends AnimationPlaybackOptions {}

                                                                                                                                                                                                                                                                                                                                                                                                                    property defaultTransition

                                                                                                                                                                                                                                                                                                                                                                                                                    defaultTransition?: Transition;

                                                                                                                                                                                                                                                                                                                                                                                                                      property delay

                                                                                                                                                                                                                                                                                                                                                                                                                      delay?: number;

                                                                                                                                                                                                                                                                                                                                                                                                                        property duration

                                                                                                                                                                                                                                                                                                                                                                                                                        duration?: number;

                                                                                                                                                                                                                                                                                                                                                                                                                          interface SVGMotionProps

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

                                                                                                                                                                                                                                                                                                                                                                                                                            • @public

                                                                                                                                                                                                                                                                                                                                                                                                                          interface UseInViewOptions

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

                                                                                                                                                                                                                                                                                                                                                                                                                            property amount

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

                                                                                                                                                                                                                                                                                                                                                                                                                              property initial

                                                                                                                                                                                                                                                                                                                                                                                                                              initial?: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                property once

                                                                                                                                                                                                                                                                                                                                                                                                                                once?: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                  property root

                                                                                                                                                                                                                                                                                                                                                                                                                                  root?: RefObject<Element | null>;

                                                                                                                                                                                                                                                                                                                                                                                                                                    interface UseScrollOptions

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

                                                                                                                                                                                                                                                                                                                                                                                                                                      property container

                                                                                                                                                                                                                                                                                                                                                                                                                                      container?: RefObject<HTMLElement | null>;

                                                                                                                                                                                                                                                                                                                                                                                                                                        property layoutEffect

                                                                                                                                                                                                                                                                                                                                                                                                                                        layoutEffect?: boolean;

                                                                                                                                                                                                                                                                                                                                                                                                                                          property target

                                                                                                                                                                                                                                                                                                                                                                                                                                          target?: RefObject<HTMLElement | null>;

                                                                                                                                                                                                                                                                                                                                                                                                                                            interface VisualState

                                                                                                                                                                                                                                                                                                                                                                                                                                            interface VisualState<Instance, RenderState> {}

                                                                                                                                                                                                                                                                                                                                                                                                                                              property latestValues

                                                                                                                                                                                                                                                                                                                                                                                                                                              latestValues: ResolvedValues;

                                                                                                                                                                                                                                                                                                                                                                                                                                                property onMount

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                  property renderState

                                                                                                                                                                                                                                                                                                                                                                                                                                                  renderState: RenderState;

                                                                                                                                                                                                                                                                                                                                                                                                                                                    Type Aliases

                                                                                                                                                                                                                                                                                                                                                                                                                                                    type AnimationSequence

                                                                                                                                                                                                                                                                                                                                                                                                                                                    type AnimationSequence = Segment[];

                                                                                                                                                                                                                                                                                                                                                                                                                                                      type AnimationType

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                        type CreateVisualElement

                                                                                                                                                                                                                                                                                                                                                                                                                                                        type CreateVisualElement<Instance> = (
                                                                                                                                                                                                                                                                                                                                                                                                                                                        Component: string | React.ComponentType<React.PropsWithChildren<unknown>>,
                                                                                                                                                                                                                                                                                                                                                                                                                                                        options: VisualElementOptions<Instance>
                                                                                                                                                                                                                                                                                                                                                                                                                                                        ) => VisualElement<Instance>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                          type Cycle

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                            type CycleState

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                              type DelayedFunction

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                type DOMMotionComponents

                                                                                                                                                                                                                                                                                                                                                                                                                                                                type DOMMotionComponents = HTMLMotionComponents & SVGMotionComponents;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type DOMSegment

                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type DOMSegment = [ElementOrSelector, DOMKeyframesDefinition];

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type DOMSegmentWithTransition

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type FeatureDefinition

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type FeatureDefinition = {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      isEnabled: HydratedFeatureDefinition['isEnabled'];
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Feature?: HydratedFeatureDefinition['Feature'];
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      ProjectionNode?: HydratedFeatureDefinition['ProjectionNode'];
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      MeasureLayout?: HydratedFeatureDefinition['MeasureLayout'];
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      };

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type FeatureDefinitions

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type FeaturePackage

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type FeaturePackage = {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Feature?: HydratedFeatureDefinition['Feature'];
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          ProjectionNode?: HydratedFeatureDefinition['ProjectionNode'];
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          MeasureLayout?: HydratedFeatureDefinition['MeasureLayout'];
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          };

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type FeaturePackages

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type ForwardRefComponent

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • @public

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type HTMLMotionProps

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • @public

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type HydratedFeatureDefinition

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type HydratedFeatureDefinition = {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              isEnabled: (props: MotionProps) => boolean;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Feature: FeatureClass<unknown>;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              ProjectionNode?: any;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              MeasureLayout?: typeof MeasureLayout;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              };

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type LazyFeatureBundle

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type MotionStyle

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type MotionStyle = MotionCSS & MotionTransform & MakeMotion<SVGPathProperties>;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • Modifiers

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    • @public

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type MotionTransform

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type MotionTransform = MakeMotion<TransformProperties>;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • Modifiers

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    • @public

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type MotionValueSegment

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type MotionValueSegmentWithTransition

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type ObjectSegment

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type ObjectSegmentWithTransition

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type ObjectTarget

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type RenderComponent

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type RenderComponent<Instance, RenderState> = (
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Component: string | React$1.ComponentType<React$1.PropsWithChildren<unknown>>,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            props: MotionProps,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            ref: React$1.Ref<Instance>,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            visualState: VisualState<Instance, RenderState>,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            isStatic: boolean,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            visualElement?: VisualElement<Instance>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            ) => any;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type ResolvedAnimationDefinition

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type ResolvedAnimationDefinitions

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type ResolveKeyframes

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type ScrapeMotionValuesFromProps

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type Segment

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type SequenceLabel

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type SequenceLabel = string;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type SequenceTime

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type SVGAttributesAsMotionValues

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type SVGAttributesAsMotionValues<T> = MakeMotion<SVGAttributesWithoutMotionProps<T>>;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            • Blanket-accept any SVG attribute as a MotionValue

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Modifiers

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              • @public

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type SwitchLayoutGroupContext

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type SwitchLayoutGroupContext = SwitchLayoutGroup & InitialPromotionConfig;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type ValueSequence

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type ValueSequence = AbsoluteKeyframe[];

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type VariantLabels

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type VariantLabels = string | string[];
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                • Either a string, or array of strings, that reference variants defined via the variants prop.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  Modifiers

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  • @public

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Namespaces

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                namespace Reorder

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                namespace Reorder {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  function Group

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    function Item

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Package Files (2)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Dependencies (3)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Dev Dependencies (3)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Peer Dependencies (3)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      Badge

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

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • Markdown
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/framer-motion)
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      • HTML
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <a href="https://www.jsdocs.io/package/framer-motion"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>