Framer Motion adheres to Semantic Versioning.
- Fixed scale correction during rotation & layout animations.
- Fixing version mismatch warning.
- Providing path to types via
package.json
'sexports
field to fix types in TypeScript 4.7. - Safer
process.env.NODE_ENV
check.
- Restore scroll position after measuring
height
when doing unit conversion animation.
- Will display a warning if different versions of Framer Motion are mixed.
- All events are now passive unless a user provides an explicit event listener.
- Added
initial
prop to Framer Motion 3D types.
- Updating
reducedMotion
prop inMotionConfig
now correctly updates throughout the tree.
- Re-enabling layout animations on
svg
elements.
- Fixing internal type errors in React 18.
- Adding deprecation notice to
AnimateSharedLayout
.
- SSR in Deno.
- Adding
layout
prop toReorder.Item
. onLayoutAnimationStart
.
- Ensure
cycle
is properly memoised.
- Fixed
useSpring
dependencies if properties change between renders. - Fixed
children
types ofAnimatePresence
andLayoutGroup
.
- Fixing
process
in ESM environments.
- Fixing race conditions for variants changed by state vs by gesture.
- Replaced undocumented
LayoutGroup
propinheritId
withinherit
.
- Remove
useId
from React 18.
- Improving compatibility with React 18.
- Fixed layout animations with Framer's
Stack
gap Safari polyfill.
- Adding
useReducedMotionConfig
for internal Framer use.
- Fixing
onBeforeLayoutMeasure
.
- Ensure
useReducedMotion
detects reduced motion on load.
reducedMotion
option toMotionConfig
.
- Added
viewport.fallback
option to disableIntersectionObserver
polyfill.
framer-motion/three
is nowframer-motion-3d
.
isValidProp
prop toMotionConfig
that allows the injection of custom detection of valid React props.
- Removing
transformTemplate
prop correctly rerenders element.
- Fixing crossfade for % or px unit border radius. Issue
MotionConfig
propagates changes to transition.
- Using
dpr
prop in layout animation calculations.
- Improving performance of
LayoutCamera
. - Removing
data-projection-id
in static mode.
- Improving performance of
LayoutCamera
and fixing final flash.
- Reimplemented dynamic resolution scaling for
LayoutCamera
.
- Removed dynamic resolution scaling from
LayoutCamera
to fix crash in iOS.
LayoutCamera
andLayoutOrthographicCamera
.
- Passing
MotionConfigContext
through from DOM into 3D.
- Fixing variant animations across DOM and 3D boundaries via
MotionCanvas
.
- Fixing export paths. PR by @edoardolincetto.
- Sharing
MotionContext
across Framer Motion and Framer Motion 3D environments in CommonJS environments.
- 3D entry point overwriting ES modules with dropped exports.
useAnimationFrame
- Fixing animating to CSS variables with
SVGElement
. Issue - Unsetting
z-index
for restingReorder.Item
components. Issue - Forward native drag listeners to
draggable
elements. Issue - Authors can now support browsers without
Proxy
by usingmotion("div")
syntax. Issue
- Ensuring forced renders are batched so sibling
AnimatePresence
renders are triggered together. Issue - Viewport enter/leave event handlers are passed
IntersectionObserverEntry
ornull
ifIntersectionObserver
is not supported on the device. Issue - No longer applying touch scroll-disabling styles if
dragListener
is set tofalse
. Issue
useInstantTransition
hook for internal use.
- Removing
layoutDependency
from forwarded props. Issue Reorder.Item
correctly firesonDrag
. Issue- Fires
onPressStart
andonHoverStart
after triggering animations. - Replay keyframes when variant changes. Issue
- Correctly SSR final keyframe when
initial
isfalse
.
whileInView
,onViewportEnter
andonViewportLeave
props.
- Fixing unit conversion for
x
andy
styles. Issue
- Enable animation between hsla and rgba/hex.
- Fixing HSLA color interpolation. Issue
- Adding path drawing support for
circle
,ellipse
,line
,path
,polygon
,polyline
andrect
components. - Add SSR support for
pathLength
.
- Fixed SSR for
pathLength
. - Downgrading
whileFocus
to lowest gesture priority. Issue - Fixed path length for elements with
vectorEffect="non-scaling-stroke"
Issue - Stripping
dragSnapToOrigin
from DOM output. PR by @Evalon
- Convert x/y from percent to pixels before drag. Issue
- Dynamic functions passed to
controls.start()
can now return variant names. Issue - Factors in padding when measuring elements for
width
/height
unit conversion. Issue
onAnimationStart
is now called with the definition of the triggering animation.
- Removing context memoisation to ensure removed values are correctly animated to.
- Adding unmount check to
AnimatePresence
before updating state. PR by @ctrlplusb - Fixing types for multi-input
useTransform
. PR by @kena0ki - Fixing
staggerChildren
for value-specific transitions. Issue - Fixes animation between
0
and non-number/pixel keyframe array. Issue
Reorder
components to create drag-to-reorder interfaces.LayoutGroup
allows namespacinglayoutId
and group elements that may affect each-other's layout on re-render.layoutDependency
prop to restrict when components are measured.layoutScroll
prop to hint to layout animations when a element is scrollable.- Layout animations are auto-completed when the viewport resizes.
layout="size"
for size-only animations PR by @bhollis.
- Various layout projection improvements.
AnimateSharedLayout
is deprecated.
- Fixing SVG
gradientTransform
. - Removing hover event suspension during layout measurements.
- Use with changing external refs.
- Correctly firing
onAnimationComplete
when a spring animation defined bybounce
and noduration
is completed.
- Narrowing the edge cases within which drag could lock the projection viewport box.
- Comparing prev scale to correct axis.
- Call function ref if it changes between renders.
- Layout measurements for drag gesture don't happen until the gesture is confirmed to start.
- Prevent occasional flash when projection hasn't yet been hydrated.
- Unifying layout batcher between drag and layout animations.
- Suspending hover events globally during layout measurements.
- Layout projection fix.
- Allow a component to have
transform
reset before measuring child layout.
- Further nested drag improvements for external motion values.
- Nested drag improvements for external motion values.
- Nested drag improvements.
- Nested drag improvements.
- Layout projection improvements.
- Disabling hover events when a drag is active.
- Animating to/between
0rem
and other non-specifically handled unit types.
- Clamping
borderRadius
to0
and above during crossfade.
- Animating from
undefined
to number (including units) now animates from0
.
- Relative layout animations
- Adding
transition.crossfade
andtransition.layout
for crossfade and layout-specific transitions.
- Various layout projection improvements.
- Replaced layout animation tree traversal with flat array traversal of just projecting elements.
- Various layout animation bugfixes.
- Upgraded
popmotion
,framesync
,style-value-types
andtslib
tolatest
.
- Adding
package.json
toexports
so it can be imported by Node.
- Added the new
LazyMotion
component to defer the loading of animations and gestures.
- The deprecated
motion.custom()
. Usemotion()
instead.
- Various variant bugs.
- Added specific
default
andrequire
fields to theexports
field for CJS compatibility.
exports
field topackage.json
.
useMotionValue
now forces re-render on the Framer canvas when the underlyingMotionValue
updates.
- Reduced memory consumption in static mode by not loading
VisualElement
.
- Improved memory consumption of
SubscriptionManager
.
- New layout animations now only trigger when the target viewport box has changed.
useVelocity
.
- Exporting
AnimationPlaybackControls
andAnimationOptions
foranimate()
. - Fixed passing dynamic function to
controls.start()
.
- Crossfader now only returns values for the lead and follow components.
- Drag now passing velocity to
useSpring
correctly.
dragElastic
now accepts per-axis elastic settings.
perspective
now correctly set as its ownstyle
.transformPerspective
still builds intotransform
.
- Refactoring
AnimationType
is improve bundle-splitting.
- Code-splitting for Webpack.
motion()
creates custommotion
components.forwardMotionProps
boolean to optionally forwardMotionProps
to custom components.
- Custom
motion
components no longer forwardMotionProps
by default.
motion.custom
- Listing React 17 as a
peerDependency
.
- More permissive check for previously-unencountered values.
- Safer
hasOwnProperty
check fornull
values.
- Only fire
onPanEnd
ifonPanStart
has triggered.
- Adding polyfill
performance.now
inframesync
.
- Only crossfading defined
borderRadius
borders during shared element transitions.
AnimatePresence
now correctly unmounts children if it contains nomotion
components.
onAnimationComplete
on child variant components now fire as expected.
onAnimationComplete
now provides the definition of the triggering animation.
- Fixing bug with
afterChildren
andexit
animations.
- Setting
sideEffects: false
inpackage.json
to help code splitting in Webpack.
onTapCancel
is now being correctly cleaned up.
- Adding
transition
prop toMotionConfig
to set a defaulttransition
for an entire tree.
onBeforeLayoutMeasure
prop, currently a Framer internal.
- De-duplicating features in nested
MotionConfig
s to avoid key error.
- Main
motion
component concurrent-safe.
- Crossfading elements can now never fall out of positional/style sync due to mismatched animations or framelag.
- Fixing SVG double translation transform (props + transform style).
animate
onComplete
now firing correctly.- Only firing keyframe animation when all values have changed.
- Removing forced re-renders for variant trees.
- Variant stagger order now determined by DOM APIs.
- Fixed default spring for
scale
,opacity
etc from being overdamped to being critically damped when animating to0
.
- Fixing errant publish.
- Exporting
useVariantContext
for internal Framer use.
- Support for hex
alpha
, ie#FFF0
and#FFFFFF00
. - Support for default
filter
values. For example, when animating frombrightness(50%)
, the animation will start frombrightness(100%)
rather thanbrightness(0%)
.
- Hover events are now blocked while layout is being measured.
- Blocking layout animations to/from zero bounding boxes.
onTapCancel
now fires correctly on touch screens.createDomMotionComponent
types.
- Fixed types for
pathSpacing
andpathOffset
.
snapToCursor
respects drag axis.
- Updated dependencies.
whileFocus
- Error when mixing
initial={false}
andanimate={controls}
.
whileDrag
- Adding Safari-prefixed
userSelect
css to draggable elements. whileHover
,whileTap
andexit
all now accept variant lists.
- New behaviour for when values are removed from animation props (
animate
,whileHover
,exit
etc). The value will be searched for in active props of a lower priority running (style
<-animate
<-whileHover
<-whileTap
<-whileDrag
<-exit
). This may introduce subtle behavioural changes, hence the major.
- The deprecated
useInvertedScale
hook. Use thelayout
prop instead. - The deprecated
yoyo
,flip
andloop
options. Userepeat
andrepeatType
options instead.
- Correctly applying
transform
on SVG elements. - Lazy-initialising viewport scroll, VisualElement.axisProgress, and reduced motion
MotionValue
s, for increased startup performance. - Improved measurement scheduling for
drag
components and nestedAnimateSharedLayout
trees. - Robust calculation of
treeScale
.
- Updating
package.json
to be compatible with React 17.
- Exporting internal API
startVisualElementAnimation
for use in Framer.
- Exporting
Target
type.
- Over-eager variant propagation.
- Reverting
matchMedia
listener to legacyaddListener
to fix in Safari.
- Refactor has reduced complete bundle size to 27kb and
m
component bundle size to 12.5kb.
- Removing whitespace from resolved CSS variables.
animate
function for low-level singleMotionValue
or arbitrary value animations.
- Reverting previous behaviour to allow manual triggering of updating drag constraints via
useDragControls
.
- If
dragConstraints
is set to a ref on a non-draggable component, we resolve the constraints on mount in order to pass them toonMeasureDragConstraints
.
duration
andbounce
are now overridden bydamping
,stiffness
, andmass
. This fixes an issue in Framer where legacy transitions were breaking.
- When a
transform
is provided tostyle
as aMotionValue
and then replaced with a number on a subsequent render, we create a newMotionValue
for it.
- Manually setting a
from
intransition
.
- Blocks propagation of variants from parent if a component's
animate
prop is set toAnimationControls
.inherit
can be used to force inheritencetrue
orfalse
.
- Blocks touch viewport scrolling from draggable components on a per-axis basis.
- Reinstating
sideEffects: false
now that theblockViewportScroll
method has been removed.
createDomMotionComponent
for legacy browser support.
- Reverting
sideEffects: false
, as viewport touch scroll blocking is a side effect.
- Duration-based springs.
- Fixing dynamic type imports in generated types.
- No longer unsetting transform motion values from
style
if their current value is0
. - Correct
useDomEvent
types to allow anyEventTarget
. - Fix memory leak error in
AnimatePresence
.
- Added
sideEffects: false
topackage.json
. - Added
bundlesize
bundle budgeting.
drag
+layout
components no longer reset position to center.
- Reduced full bundle size by 0.8kb by replacing
import * from "popmotion"
with a named map of specifically just the easing functions.
- Reinstating default keyframes duration of
0.8
seconds.
dragElastic={0}
gesture end animations now work correctly.
- Ensure
AnimatePresence
children re-render when children exit.
- Ensure useTransform uses the latest handler.
- Scale correction for
borderRadius
andboxShadow
found instyle
. - Fixed conflict between
initial
andstyle
.initial
will now take precedence on initial render. - Support for CSS variables in scale-corrected
boxShadow
styles.
- Correctly mapping
times
option to Popmotion'soffset
.
- Tweaked
restSpeed
defaults for smoother halting of physical (px) springs.
- Critical-damped spring equations in Popmotion.
- Forcing array targets to use keyframes animations.
- Coercion to type
auto
.
- Fixing detection of transition definitions and application of default transitions.
- When animating to/from
0
and a unit type,0
will be coerced to that unit type rather than needing unit conversion via DOM measurement.
- Updating
useDragControls
documentation to reflect that triggering events should beusePointerDown
, as mouse events work differently on touch screens. AnimatePresence.custom
is passed throughout the tree for all exit variants.- Animating the
viewBox
attribute ofsvg
elements now correctly sets theviewBox
attribute instead ofview-box
.
- Typescript 4.
- Reverting relative
dragConstraints
resolution that was erroneously changed in2.1.3
.
- Tweaked
restDelta
in[email protected]
for smootheropacity
transitions.
- Fixed jumpy drag transitions resulting from existing animations not being correctly stopped.
- Improved velocity check for underdamped springs.
- Drag transitionEnd conflicting with layout animations.
- Occasional glitchy movement with
type: "spring"
andrepeatType: "mirror"
- New repeat syntax
- Support for repeated springs
- Fixed support for
null
in keyframes animations. - Fixed
delay
propagation.
- Upgrading to Popmotion 9 RC.
- Adding defensive check for
visualElement.box
inMeasureLayout
.
- Upgraded
useTransform
to accept multipleMotionValue
s. - Support for
transformPerspective
style. - Internal:
_dragX
and_dragY
externalMotionValue
targets for drag gesture. - Internal: Support for rotate in
AnimateSharedLayout
within Framer. - Internal:
onViewportBoxUpdate
,onLayoutMeasure
andonLayoutUpdate
event handlers added toHTMLVisualElement
.
- Fixed
AnimateSharedLayout
within React17.0.0-rc.0
. - Drag now works directly on
x
andy
transforms unlesslayout
orlayoutId
are also set.
- Marked
useInvertedScale
as deprecated.
useMotionTemplate
, a hook for combining MotionValues using a string template literal.
m
component is a lightweight, featureless version of themotion
component.MotionConfig
is used to dynamically provide features tom
components via context.
- Drag Cypress test suite.
- Application of relative drag constraints.
- User-set transforms were only updating when layout transforms updated.
- Fixing drag on SVG components.
- HSLA interpolation when either HSLA contains a decimal.
- Whitespace-syntax color support.
onLayoutAnimationComplete
now firing correctly.
- Respecting
transformTemplate
for layout animations. - Fixed
this.box is undefined
errors.
- Internal refactoring to improve tree-shaking and allow for dynamic feature injection.
- Performance improvements to layout delta calculations.
layout="position"
for position-only layout animations.
- Fixed issue with draggable components staying stuck when they're getting render-thrashed.
layout
prop for automatic layout animations.AnimateSharedLayout
andlayoutId
for shared layout animations.onMeasureDragConstraints
prop that fires whendragConstraints
are measured.useIsPresent
, a read-only version ofusePresence
.- Allow
dragConstraints
to be a ref that is smaller than the draggable element.
positionTransition
andlayoutTransition
props (uselayout={true}
instead).Point
type in favour ofPoint2D
.useAnimatedState
: Moved to Framer library.dragOriginX
,dragOriginY
props.stylefire
as a dependency.
- Removing a
MotionValue
fromstyle
now correctly unsets it from the element.
- Using
Proxy
to generatemotion
components. This saves ~0.5kb from the bundle size and ensures compatibility with all DOM elements and Web Components. x
andy
transform values won't change as a result of a drag gesture as this now works via layout projection.- Drag events now report
point
as the pointer relative to the viewport, in line with other pointer events. - Changed build process and using Terser for uglification. Reduces bundle size by ~1.2kb. (@stokesman in #596)
- Using
useIsomorphicEffect
foruseElementScroll
anduseViewportScroll
.(@thebuilder in #592)
- Added a
useElementScroll
hook that allows the creation of scroll motion values for HTML elements. (@souporserious in #195)
- Replacing the functionality of
DragControls
e.preventDefault()
with CSS and HTML attributes. (@inventingwithmonster in #495)
- Fixing
PresenceChild
losing correct count of exiting children if it re-renders. (@inventingwithmonster in #490)
- Removed developer warning when using
usePresence
outside of anAnimatePresence
block.
- Fixing
AnimatePresence
children not re-rendering when their exiting siblings have been removed from the tree (which broke siblingspositionTransition
andlayoutTransition
). (@inventingwithmonster in #489) - Adding
null
check forgetTranslateFromMatrix
(@JoyalJoyMadeckal in #482)
AnimatePresence
now supports multipleusePresence
children within a given sub-tree.
- Ensuring drag momentum animations happen on
_dragValueX
and_dragValueY
if provided. (@inventingwithmonster in #473)
usePresence
hook. (@inventingwithmonster in #473)repository
field inpackage.json
. (@iamstarkov in #469)
dragListener
prop to disable drag event listeners.
- Updated documentation for
DragControls.start
.
- Downgraded
api-extractor
to@7.3
as7.7.7
brokeMethod
name indexing.
- Updated documentation for
useDragControls
.
useDragControls
allows imperative initiation of a drag gesture.
- Updated
transformTemplate
to provide an empty string if all transform values are default.
- Changed definition of
staggerDirection
from1 | -1
tonumber
to reduce the need for casting externally-defined types.
- Added support for
TargetResolver
inexit
types.
- Filtering
onAnimationStart
from forwarded props.
- Support for
prefers-reduced-motion
via theuseReducedMotion
hook.
- Various
StrictMode
-related bugs includinglayoutTransition
origin calculation. - Only applying drag constraints during a
useEffect
to allow render-triggered animations a chance to start (thereby blocking the application of constraints).
controls.set
can now accept a function that will resolve once for each child.
- Fixing
ref
hydration inuseLayoutEffect
. (Note: This release effectively reverts1.6.10
. Each child ofAnimatePresence
with a uniquekey
should be given a uniqueref
). - Moving callback ref mutation in
use-drag
anduse-pan-gesture
to auseEffect
.
- Quick start section to README.
- Making position change detection more intelligent.
- Fixing undefined
this.props
error forAnimatePresence.exitBeforeEnter
.
- Support strings in
motion.custom
for Web Component support.
- Inconsistency in handling
x
/y
between SVG and HTML. Now always a shorthand fortranslateX
andtranslateY
.
- Fixing the use of externally-provided
ref
s with single-childAnimatePresence
components.
- Exit variant propagation.
- Cancelling exit animations.
- Fixed exit animation when
animate={useAnimation()}
. - Fixed exit animations when another animation is playing concurrently and finishes first.
- Upgrade
[email protected]
to fixclipPath
in Webkit. - Allow
motion.custom
to accept custom prop types. - Support clicks within draggable components on iOS Safari.
- Making
inherit
public API.
- Restoring React-style behaviour for transform
style
properties when a componentisStatic
.
- Adding
@emotion/is-prop-valid
as an optional dependency to ensure we filter out arbitrary props passed along by Emotion and Styled Components.
- Value-specific
delay
.
- Ensuring
onDragEnd
always fires after ifonDragStart
fired.
- Invalid property in SVGs.
- Making
useInvertedScale
public and changing const to function.
layoutTransition
EventInfo
now passed as second argument toonHoverStart
andonHoverEnd
.useDomEvent
hook for attaching events directly to anElement
.
- Simplifying event system.
- Applying values in
animate.transitionEnd
if not initial animation. - Made drag constraints only apply if a value isn't animating.
- Don't throw error if
useInvertedScale
is provided arguments.
useInvertedScale
for inverting parent scales.
positionTransition
on exiting components withinAnimatePresence
.
- Pan and drag gestures with
PointerEvent
.
AnimatePresence.exitBeforeEnter
.- Added explicit support for custom components as children of
AnimatePresence
.
- Fixing issue with drag constraints (ref-based) being reset, while dragging, on unrelated parent component updates.
- Updated rollup config to list
tslib
as an external dependency. - Ensuring unmounting components don't call
onAnimationComplete
. - Adding error message when no initial value is set, or can be read or inferred.
- Ensuring color alpha is always within bounds.
- Ensuring variants propagate on unmount.
- Added
onAnimationStart
.
- Make sure
select
,input
,textarea
loose focus when blocking default behaviour in a draggable element.
- Value type conversion for currently-hidden elements.
- Fixing unit type conversions when non-positional transforms are applied.
- Fixing variant propagation via
useAnimation()
when the parent component has novariants
prop set. - Fixing unsetting
whileHover
andwhileTap
if they containtransitionEnd
values. - Child components within variant trees now animate to
animate
as set by their parent. - Checking animation props for array variants as well as strings.
- If unencountered value is animated, first attempt to extract an initial value from keyframes definition. Also upgrading
stylefire
to gracefully handle transform requests.
isValidMotionProp
function.
- Improving types for
SVGTextElement
components.
- Don't load
positionTransition
functionality component server-side. - In development mode, ensuring all child keys are unique.
- Typescript to
3.5
.
- Removing re-entering children from exiting list in
AnimatePresence
.
- Supporting
positionTransition
as a function that resolves when the component has moved. - Adding
dragOriginX
anddragOriginY
props.
- Excluding
positionTransition
from SVG type.
- Exporting
AnimatePresenceProps
.
- Fixing
positionTransition
on server-side.
- Upgrade to
AnimatePresence
algo.
- Moving UMD global from
FramerMotion
toMotion
. - Removed
@emotion/is-valid-prop
, saving ~1.9kb from bundle. - Using a slimmed-down version of Popmotion, saving ~3kb from bundle.
- Removing
async
markers, saving ~0.7kb from bundle.
- Cancelling
drag
andpan
gestures on component unmount. - Previously unseen props in
animate
animate correctly. - Fixing reading SVG attributes from DOM.
- Fixed unit type conversion not working with previously-undefined values.
- Calling
onAnimationComplete
whenwhile
overrides are unset. - Preventing initial animation if
animate
is a map of props andinitial={false}
. This went previously unseen as both values were equivalent, butonAnimationComplete
would fire on mount.
AnimatePresence
component for controlling mount/unmount animations.positionTransition
prop for animating when the layout of a component changes.
- Fixing SVG path props.
- Moving SVG path props to
MotionStyle
type. - Changing
MakeMotion
to accept eitherMotionValue<string>
ORMotionValue<number>
.
- Moving
dragConstraints
to a ref if a component re-renders mid gesture. - Only applying
dragConstraints
on render if component isn't currently dragging.
- Making
when
type more permissive for passing in implicitly typed, pre-definedvariants
. - Not blocking default browser behaviour when dragging is initiated on draggable element's
select
,input
,textarea
elements.
- Fixing
useSpring
unsubscriptions.
- Improved SVG support.
- Ensuring each
MotionValue
receives oneMotionValuesMap
update subscriber.
- Adding
x
/y
MotionValue
s to theuseDrag
dependency list. - Ensure hover events only fire as a result of mouse interactions.
- Allowing SVG
motion
components to acceptMotionValue
s via attributes. - Adding SVG attribute types to
Target
.
- Detecting
originZ
as atransform-origin
value.
initial={false}
to shadow contents ofanimate
thereby disabling on mount animation.AnimationControls.set
for imperative setting of values.
- Resolve animations only after a defined
delay
to ensurevelocity
is only resolved as an animation begins on a value.
[email protected]
- ChangesoriginX
/Y
default to"50%"
.
- Production and prototype environment-specific tsdocs.
- Properly cleaning up event listeners in tap gesture.
- Only starting pan gesture when pointer has moved more than one point.
- Applying
transformPagePoint
todragConstraints
when it's aRefObject<Element>
to ensure it works in scaled environments. - Fixing
dragElastic
behaviour whendragMomentum={false}
.
- Preventing default browser behaviours on draggable elements.
- Fixing drag when a multitouch gesture starts.
- Application of
delay
.
- Fixed regex detection for fallbacks containing a decimal.
dragConstraints
can now be set as aReact.RefObject
.
- Support CSS variables with metadata
- Fixing circular CSS dependencies
- Even if a
motion
component wasn't inheriting variant changes, it'd still register with its parent, meaning it'd be considered during stagger duration calculations. - Only firing
onDragEnd
if dragging has actually happened.
dragTransition
now listed as auseDraggable
dependency.
- Experimental
useAnimatedState
Hook for animating arbitrary values.
- Disabling the animation of
zIndex
. - Making components without variants or animation-controlling props invisible to
staggerChildren
.
- API
- Variant propagation when rerendering children
- Using
transition
andtransitionEnd
as direct values on theanimate
prop on subsequent renders. - Rounding
zIndex
. AnimationControls.start
now accepts the sameAnimationDefinition
asValueAnimationControls.start
.
- Cancelling pan gesture when the move events have no mouse button.
- Fixing propagation of unsetting variant overrides.
- Making variant inheritance more permissive.
- Improved handling of attempting to animate between non-animatable and animatable values.
- Adds array and object support to
transform
.
- Makes boxShadow and other complex value type support more robust.
- Fixing overwriting
transform
.
- Updating deps.
shadow
toCustomValueTypes
.
- Fixed propagation of
initial
instatic
mode. - Fixing animations from values that are read as "none".
- Filtering pointer events not from the primary pointer (ie non-left clicks for mouse).
- Fixing drag in Android devices by adding aggressive viewport scroll blocking. This will need dialling back down when it comes to open sourcing Framer Motion so, for instance, a horizontal carousel doesn't block vertical scrolling.
custom
prop for dynamic variants.
useAnimation
no longer takesvariants
ordefaultTransition
arguments (provide these to the component).
- Improving comparison for
animate
prop to account for keyframe arrays. - Adding drag point in
onDragStart
andonDragEnd
callbacks.
- Support for CSS variables.
onDragEnd
not returning transformed point.- Fixing use of
variants
prop withuseAnimation
.
HTMLMotionProps
andSVGMotionProps
.
onPanSessionStart
event handler.
useViewportScrollValues
=>useViewportScroll
.
ease
can now be an array for keyframes animations.
easings
prop.
- Only firing
value.onChange
when value actually changes.
- Updating
hey-listen
.
- Explicit support for the
radius
value.
- Making special value support configurable
useTransformedValue
=>useTransform
transform(value, input, output, options)
overload.
- Added new methods to
safeWindow
SSR window mocking.
- Deleting unused props from
style
object rather than setting toundefined
. #99
size
works withwhile
gestures.
useCycle([...args])
->useCycle(...args)
static
components reflect changes ininitial
.
- Dragging doesn't break during re-renders.
useCycle
setter is independent from render cycle.
useCycle
no longer has the ability to start at a different index.
onDragTransitionEnd
- Popmotion libraries.
value.addUpdateSubscription
=>value.onChange
value.addRenderSubscription
=>value.onRenderRequest
(and made internal)
- Variants propagate to children even if not present on parent.
- Updating docs to avoid single-letter
event
vars.
- Fixing
TargetAndTransform
type to omit CSS-nativerotate
property.
press
->whileTap
hover
->whileHover
- Fixing HTML types.
- Exporting
MotionTransform
type.
- Added support for
CustomValueType
inunwrapMotionValue
.
- Added
dragDirectionLock
prop.
"lockDirection"
fromdragEnabled
.
- Renamed
dragEnabled
todrag
.
- Adding
transition
argument toanimation.start()
.
- No longer fire tap gesture if parent is dragging.
- Adjusting default
inertia
settings to more naturally incorporate velocity. - Killing drag momentum on subsequent
pressDown
. - Preventing pan velocity from adjusting draggable parents that have not received
dragPropagation
. - Updating of
dragConstraints
repositions the draggable element to adhere to the new values
Point.relativeTo
transform
- Statefull style bug.
- Fixing
Promise
resolution withanimate.start()
when fired pre-mount.
- Blocking extra gesture props from being passed to DOM.
- Upgrading
@popmotion/popcorn
to fix Jest bug.
- Fixing
style
set asnull
.
- Adding support for custom values.
- Updating tsdocs for
MotionValue
.
- Updating dependencies.
originX
,originY
,pathLength
,pathOffset
changed from percent to progress value types.
- Exporting
AnimationControls
.
- Exporting
animationControls
andmotionValue
for internal use.
- Passing
panInfo
through toonDragStart
andonDragEnd
.
easings
property onkeyframes
now maps correctly to easing functions.
- Enforcing keyframes animation if target is array.
- Orchestration props in
transition
prop weren't being respected by variants with notransition
of their own.
- Animation targets can be set as
keyframes
.
- Updating
dragConstraints
when they change.
- Removing GPU-acceleration for
static
components. - Adding
customStyles
plugin.
- Exporting
MotionContext
.
- Updated
[email protected]
to improve synchronisation across tweens when yoyoing.
- If
transformPagePoint
is present, transforming initial point.
- Recognising
press
when it's the lone gesture.
- Fixed an issue where values set to
style
would overwriteanimate
values even if they hadn't changed.
static
prop. Setstatic
on a motion component to prevent animation and interaction.
render
- Animating unit-converting values on mount.
- Exporting
MotionComponents
,CustomMotionComponent
,HTMLMotionComponents
andSVGMotionComponents
types. - Exporting
safeWindow
.
onDrag
event listener- Exporting
MotionStyles
type.
tap
->press
- Fixing
originX
andoriginY
SSR. - Updating
style
props to overwrite CSSrotate
,scale
andperspective
.
- Rendering
initial
properties via Stylefire when component mounts to ensure its in-sync with all transform values set ininitial
that might not later be rendered. - Exporting
htmlElements
,svgElements
andcreateMotionComponent
as their exclusion was causing errors with the output declaration file.
- Exporting
useExternalRef
.
- Simplifying inline tsdocs.
- Standardizing
(event, pointInfo)
as signature for gesture callbacks.
- Gesture priority bugs
- Added TSDocs for
useCycle
duration
anddelay
are now defined as seconds.tapActive
->tap
hoverActive
->hover
drag
->dragEnabled