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
- addPointerEvent()
- addPointerInfo()
- addScaleCorrector()
- animateMini()
- AnimatePresence()
- animateVisualElement()
- animationControls()
- buildTransform()
- calcLength()
- createBox()
- createRendererMotionComponent()
- createScopedAnimate()
- delay()
- disableInstantTransitions()
- distance()
- distance2D()
- filterProps()
- inView()
- isMotionComponent()
- isValidMotionProp()
- LazyMotion()
- makeUseVisualState()
- MotionConfig()
- ReorderGroup()
- ReorderGroupComponent()
- ReorderItem()
- ReorderItemComponent()
- resolveMotionValue()
- scroll()
- scrollInfo()
- stagger()
- startOptimizedAppearAnimation()
- unwrapMotionComponent()
- useAnimate()
- useAnimateMini()
- useAnimationControls()
- useAnimationFrame()
- useCycle()
- useDeprecatedAnimatedState()
- useDeprecatedInvertedScale()
- useDomEvent()
- useDragControls()
- useElementScroll()
- useForceUpdate()
- useInstantLayoutTransition()
- useInstantTransition()
- useInView()
- useIsPresent()
- useMotionTemplate()
- useMotionValue()
- useMotionValueEvent()
- usePresence()
- usePresenceData()
- useReducedMotion()
- useReducedMotionConfig()
- useResetProjection()
- useScroll()
- useSpring()
- useTime()
- useTransform()
- useUnmountEffect()
- useVelocity()
- useViewportScroll()
- useWillChange()
Classes
VisualElement
- addValue()
- addVariantChild()
- animationState
- blockInitialAnimation
- build()
- children
- current
- depth
- getBaseTarget()
- getBaseTargetFromProps()
- getClosestVariantNode()
- getDefaultTransition()
- getProps()
- getStaticValue()
- getTransformPagePoint()
- getValue()
- getVariant()
- handleChildMotionValue()
- hasValue()
- isControllingVariants
- isVariantNode
- KeyframeResolver
- latestValues
- manuallyAnimateOnMount
- measureInstanceViewportBox()
- measureViewportBox()
- mount()
- notify()
- notifyUpdate
- on()
- onBindTransform()
- options
- parent
- presenceContext
- prevPresenceContext
- prevProps
- projection
- props
- readValue()
- readValueFromInstance()
- removeValue()
- removeValueFromRenderState()
- render
- renderInstance()
- renderState
- scheduleRender
- scrapeMotionValuesFromProps()
- setBaseTarget()
- setStaticValue()
- shouldReduceMotion
- sortInstanceNodePosition()
- sortNodePosition()
- triggerBuild()
- type
- unmount()
- update()
- updateFeatures()
- values
- variantChildren
Interfaces
IProjectionNode
- addEventListener()
- animationId
- animationValues
- applyTransform()
- blockUpdate()
- calcProjection()
- checkUpdateFailed()
- children
- clearMeasurements()
- clearSnapshot()
- currentAnimation
- depth
- didUpdate()
- finishAnimation()
- getClosestProjectingParent()
- getProjectionStyles()
- getStack()
- hasCheckedOptimisedAppear
- hasListeners()
- hasTreeAnimated
- hide()
- id
- instance
- isAnimationBlocked
- isLayoutDirty
- isLead()
- isPresent
- isProjecting()
- isProjectionDirty
- isSharedProjectionDirty
- isTransformDirty
- isTreeAnimating
- isTreeAnimationBlocked
- isUpdateBlocked()
- isUpdating
- isVisible
- latestValues
- layout
- measure()
- measurePageBox()
- mount
- needsReset
- nodes
- notifyListeners()
- options
- parent
- path
- preserveOpacity
- prevTransformTemplateValue
- projectionDelta
- projectionDeltaWithTransform
- promote()
- registerSharedNode()
- relativeParent
- relativeTarget
- relativeTargetOrigin
- relegate()
- resetSkewAndRotation()
- resetTransform()
- resetTree()
- resolvedRelativeTargetAt
- resolveTargetDelta()
- resumeFrom
- resumingFrom
- root
- scheduleCheckAfterUnmount()
- scheduleRender()
- scheduleUpdateProjection()
- scroll
- setAnimationOrigin()
- setOptions()
- setTargetDelta()
- sharedNodes
- shouldResetTransform
- show()
- snapshot
- startAnimation()
- startUpdate()
- target
- targetDelta
- targetWithTransforms
- treeScale
- unblockUpdate()
- unmount
- updateBlockedByResize
- updateLayout()
- updateManuallyBlocked
- updateScroll()
- updateSnapshot()
- willUpdate()
Type Aliases
- AnimationSequence
- AnimationType
- CreateVisualElement
- Cycle
- CycleState
- DelayedFunction
- DOMMotionComponents
- DOMSegment
- DOMSegmentWithTransition
- FeatureDefinition
- FeatureDefinitions
- FeaturePackage
- FeaturePackages
- ForwardRefComponent
- HTMLMotionProps
- HydratedFeatureDefinition
- LazyFeatureBundle
- MotionStyle
- MotionTransform
- MotionValueSegment
- MotionValueSegmentWithTransition
- ObjectSegment
- ObjectSegmentWithTransition
- ObjectTarget
- RenderComponent
- ResolvedAnimationDefinition
- ResolvedAnimationDefinitions
- ResolveKeyframes
- ScrapeMotionValuesFromProps
- Segment
- SequenceLabel
- SequenceTime
- SVGAttributesAsMotionValues
- SwitchLayoutGroupContext
- ValueSequence
- VariantLabels
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 anexit
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.divkey={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 withexit
props, it will only unmount the child once allmotion
components have finished animating out. Likewise, any components usingusePresence
all need to callsafeToRemove
.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 validMotionProp
.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 themotion
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 loadingimport { LazyMotion, m, domAnimation } from "framer-motion"function App() {return (<LazyMotion features={domAnimation}><m.div animate={{ scale: 2 }} /></LazyMotion>)}// Asynchronous loadingimport { 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 childrenmotion
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 formotion.div
or the React component formotion(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 theanimate
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
andstop
methodsModifiers
@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.divanimate={{ 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 forscaleX
andscaleY
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 fetchscaleX
andscaleY
from the nearest parent. By passing otherMotionValue
s in asuseInvertedScale({ 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 adrag
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 theuseDragControls
hook, we can pass this into the draggable component'sdragControls
prop. It exposes astart
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
, exceptuseIsPresent
simply returns whether or not the component is present. There is nosafeToRemove
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 createMotionValue
s externally and pass them into the animated component via thestyle
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 useusePresence
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
isfalse
, it means that a component has been removed the tree, butAnimatePresence
won't really remove it untilsafeToRemove
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 withopacity
, 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, whenset
, 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 anotherMotionValue
.Parameter inputValue
MotionValue
or number. If provided aMotionValue
, when the inputMotionValue
changes, the createdMotionValue
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 anotherMotionValue
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 returnedMotionValue
will:- When provided a value between
-200
and-100
, will return a value between0
and1
. - When provided a value between-100
and100
, will return1
. - When provided a value between100
and200
, will return a value between1
and0
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.divanimate={{ x: 200 }}style={{ opacity, x }}/>)}Modifiers
@public
Create a
MotionValue
that transforms the output of anotherMotionValue
through a function. In this example,y
will always be doublex
.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 throughtransform
to update the returnedMotionValue
.Parameter transform
A function that accepts the latest value from
input
and returns a new value.Returns
MotionValue
Modifiers
@public
Pass an array of
MotionValue
s and a function to combine them. In this example,z
will be thex
multiplied byy
.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
MotionValue
s that will pass their latest values throughtransform
to update the returnedMotionValue
.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 providedMotionValue
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
-enabledmotion
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 thedragControls
prop.dragControls.start(e, {snapToCursor: true})Parameter event
PointerEvent
Parameter options
Options
Modifiers
@public
class FlatTree
class FlatTree {}
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
andvar
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 {}
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 newcustom
prop, you can do so viaAnimatePresence
. 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.divkey="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 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.jsimport { domAnimation } from "framer-motion"export default domAnimation// index.jsimport { 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 amotion
component renders within aLazyMotion
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_stylesModifiers
@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 forMotionValue
s and separatetransform
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 {}
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'> {}
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
Package Files (2)
Dependencies (3)
Dev Dependencies (3)
Peer Dependencies (3)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/framer-motion
.
- Markdown[](https://www.jsdocs.io/package/framer-motion)
- HTML<a href="https://www.jsdocs.io/package/framer-motion"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 8277 ms. - Missing or incorrect documentation? Open an issue for this package.