Motion / Changelog925 releases
Changelog
Releases across Motion, Motion+, and Motion AI Kit.
Changed
- MCP: Installation requires setting access token via
env.TOKENinstead of URL query string.
Added
- MCP: Includes Motion docs and CSS generation tools for unauthenticated users.
- MCP: Codex can now also query your saved transitions.
- MCP: Installation requires setting access token via
Changed
- Unified Motion Studio SDK, MCP and Extension versioning.
- Extension: Replaced internal
EasingCurvecomponent with SDK.
Added
- Extension: Packaged and minified for smaller filesize.
Fixed
- SDK
EasingCurve: Ensure final curve point is drawn correctly.
Added
- SDK
EasingCurve: React component for drawing a provided easing curve. - SDK
TransitionState: State for editing Motion transitions. - SDK
toCSSTransition: ConvertTransitionStateto a CSStransitionstring. - SDK
toMotionTransition: ConvertTransitionStateto a MotionTransitionstring. - SDK
fromShareURL: Create aTransitionStatefrom the current URL. - SDK
toShareQueryString: Create a serialisedTransitionStatesafe for adding to the URL.
- SDK
Added
- Motion+ AI Patterns: Use your LLM to query Motion Examples to kickstart its code generation.
Added
Carousel: Create accessible, performant, infinitely-scrolling carousels.useTickerItem: Access item-relative offset withinCarouselandTicker, as well as item information likeitemIndex,cloneIndex, layoutstartandend.Ticker: AddedfadeandsafeMarginoptions.
Removed
useItemOffset. Replaceconst offset = useItemOffset()withconst { offset } = useTickerItem().
Added
Ticker
Changed
press,hoverandinViewnow pass the target element as the first argument to the gesture start callback.
Changed
- Replaced velocity-check jobs in favour of passive detection.
- Post-commit render moved to a microtask.
Added
background-coloranimations are now hardware accelerated.
Removed
- Removing fallback for
IntersectionObserver. Use a polyfill for support in older browsers. - Removed
DeprecatedLayoutGroupContext.
Changed
- Using
exitBeforeEnterwithAnimatePresencenow throws an error. - Using
value.onChangewill now throw a warning with instructions to change tovalue.on("change", callback). - Using
AnimateSharedLayoutnow throws an error.
Fixed
repeat: Infinityno longer de-opts from pre-generated WAAPI animations.
Added
- Tap events are now keyboard accessible.
Changed
whileFocusonly triggers according tofocus-visiblerules.
Removed
- Removed polyfilled support for mouse/touch events.
- Removed drag pointerup patch for Safari over
<select />elements.
Changed
DragControls.startnow acceptsPointerEventonly.
Updated
react@18react-three-fiber@8
Fixed
- Drag to reorder items no longer jumping in React 18.
Changed
framer-motion/threeis nowframer-motion-3d.
Added
Reordercomponents to create drag-to-reorder interfaces.LayoutGroupallows namespacinglayoutIdand group elements that may affect each-other's layout on re-render.layoutDependencyprop to restrict when components are measured.layoutScrollprop 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.
Fixed
- Various layout projection improvements.
Changed
AnimateSharedLayoutis deprecated.
Added
- Added the new
LazyMotioncomponent to defer the loading of animations and gestures.
Removed
- The deprecated
motion.custom(). Usemotion()instead.
- Added the new
Added
whileDrag- Adding Safari-prefixed
userSelectcss to draggable elements. whileHover,whileTapandexitall now accept variant lists.
Changed
- New behaviour for when values are removed from animation props (
animate,whileHover,exitetc). 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.
Removed
- The deprecated
useInvertedScalehook. Use thelayoutprop instead. - The deprecated
yoyo,flipandloopoptions. UserepeatandrepeatTypeoptions instead.
Fixed
- Correctly applying
transformon SVG elements. - Lazy-initialising viewport scroll, VisualElement.axisProgress, and reduced motion
MotionValues, for increased startup performance. - Improved measurement scheduling for
dragcomponents and nestedAnimateSharedLayouttrees. - Robust calculation of
treeScale.
Added
layoutprop for automatic layout animations.AnimateSharedLayoutandlayoutIdfor shared layout animations.onMeasureDragConstraintsprop that fires whendragConstraintsare measured.useIsPresent, a read-only version ofusePresence.- Allow
dragConstraintsto be a ref that is smaller than the draggable element.
Removed
positionTransitionandlayoutTransitionprops (uselayout={true}instead).Pointtype in favour ofPoint2D.useAnimatedState: Moved to Framer library.dragOriginX,dragOriginYprops.stylefireas a dependency.
Fixed
- Removing a
MotionValuefromstylenow correctly unsets it from the element.
Changed
- Using
Proxyto generatemotioncomponents. This saves ~0.5kb from the bundle size and ensures compatibility with all DOM elements and Web Components. xandytransform values won't change as a result of a drag gesture as this now works via layout projection.- Drag events now report
pointas 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)
Added
- Improved SVG support.