Compared with 12.33.0: `DeprecatedLayoutGroupContext`, `useDeprecatedInvertedScale`, `useElementScroll`, `useViewportScroll`, `DraggableProps`, and 27 more. 1 newly deprecated.
framer-motion 12.33.0 → 14.6.0: deprecates 32 API(s): from its source to your code
DeprecatedLayoutGroupContext: Note: Still used by components generated by old versions of Framer
useDeprecatedInvertedScale: Returns a `MotionValue` each for `scaleX` and `scaleY` that update with the inverse of their respective parent scales. This is useful for undoing the distortion of content when scaling a parent component. By default, `useInvertedScale` will automatically fetch `scaleX` and `scaleY` from the nearest parent. By passing other `MotionValue`s in as `useInvertedScale({ scaleX, scaleY })`, it will invert the output of those instead. ```jsx const MyComponent = () => { const { scaleX, scaleY } = useInvertedScale() return <motion.div style={{ scaleX, scaleY }} /> } ```
useElementScroll: useElementScroll is deprecated. Convert to useScroll({ container: ref })
useViewportScroll: useViewportScroll is deprecated. Convert to useScroll()
DraggableProps: - Use MotionNodeDragHandlers/MotionNodeDraggableOptions
FollowValueOptions.staggerChildren: When using variants, animations of child components can be staggered by this duration (in seconds). For instance, if `staggerChildren` is `0.01`, the first child will be delayed by `0` seconds, the second by `0.01`, the third by `0.02` and so on. The calculated stagger delay will be added to `delayChildren`. - Use `delayChildren: stagger(interval)` instead.
FollowValueOptions.staggerDirection: The direction in which to stagger children. A value of `1` staggers from the first to the last while `-1` staggers from the last to the first. - Use `delayChildren: stagger(interval, { from: "last" })` instead.
WillChangeMotionValue.onChange: Adds a function that will be notified when the `MotionValue` is updated. It returns a function that, when called, will cancel the subscription. When calling `onChange` inside a React component, it should be wrapped with the `useEffect` hook. As it returns an unsubscribe function, this should be returned from the `useEffect` function to ensure you don't add duplicate subscribers.. ```jsx export const MyComponent = () => { const x = useMotionValue(0) const y = useMotionValue(0) const opacity = useMotionValue(1) useEffect(() => { function updateOpacity() { const maxXY = Math.max(x.get(), y.get())
AnimationOrchestrationOptions.staggerChildren: When using variants, animations of child components can be staggered by this duration (in seconds). For instance, if `staggerChildren` is `0.01`, the first child will be delayed by `0` seconds, the second by `0.01`, the third by `0.02` and so on. The calculated stagger delay will be added to `delayChildren`. - Use `delayChildren: stagger(interval)` instead.
AnimationOrchestrationOptions.staggerDirection: The direction in which to stagger children. A value of `1` staggers from the first to the last while `-1` staggers from the last to the first. - Use `delayChildren: stagger(interval, { from: "last" })` instead.
AsyncMotionValueAnimation.then: Allows the animation to be awaited. Use `finished` instead.
DOMKeyframesDefinition.clip: The **`clip`** CSS property defines a visible portion of an element. The clip property applies only to absolutely positioned elements — that is, elements with position:absolute or position:fixed. [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/clip)
JSAnimation.then: Allows the returned animation to be awaited or promise-chained. Currently resolves when the animation finishes at all but in a future update could/should reject if its cancels. Use `finished` instead.
MotionPath.animateVisualElement: Implement `animateValues`, which also runs for elements animated by `animate()`. Only called for VisualElements, and only when `animateValues` isn't implemented.
MotionValue.onChange: Adds a function that will be notified when the `MotionValue` is updated. It returns a function that, when called, will cancel the subscription. When calling `onChange` inside a React component, it should be wrapped with the `useEffect` hook. As it returns an unsubscribe function, this should be returned from the `useEffect` function to ensure you don't add duplicate subscribers.. ```jsx export const MyComponent = () => { const x = useMotionValue(0) const y = useMotionValue(0) const opacity = useMotionValue(1) useEffect(() => { function updateOpacity() { const maxXY = Math.max(x.get(), y.get())
NativeAnimation.then: Allows the animation to be awaited. Use `finished` instead.
TransitionWithValueOverrides.clip: The **`clip`** CSS property defines a visible portion of an element. The clip property applies only to absolutely positioned elements — that is, elements with position:absolute or position:fixed. [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/clip)
ValueAnimationWithDynamicDelay.staggerChildren: When using variants, animations of child components can be staggered by this duration (in seconds). For instance, if `staggerChildren` is `0.01`, the first child will be delayed by `0` seconds, the second by `0.01`, the third by `0.02` and so on. The calculated stagger delay will be added to `delayChildren`. - Use `delayChildren: stagger(interval)` instead.
ValueAnimationWithDynamicDelay.staggerDirection: The direction in which to stagger children. A value of `1` staggers from the first to the last while `-1` staggers from the last to the first. - Use `delayChildren: stagger(interval, { from: "last" })` instead.
WillChange.onChange: Adds a function that will be notified when the `MotionValue` is updated. It returns a function that, when called, will cancel the subscription. When calling `onChange` inside a React component, it should be wrapped with the `useEffect` hook. As it returns an unsubscribe function, this should be returned from the `useEffect` function to ensure you don't add duplicate subscribers.. ```jsx export const MyComponent = () => { const x = useMotionValue(0) const y = useMotionValue(0) const opacity = useMotionValue(1) useEffect(() => { function updateOpacity() { const maxXY = Math.max(x.get(), y.get())
IProjectionNode.currentAnimation.then: Allows the returned animation to be awaited or promise-chained. Currently resolves when the animation finishes at all but in a future update could/should reject if its cancels. Use `finished` instead.
ScrollMotionValues.scrollX.onChange: Adds a function that will be notified when the `MotionValue` is updated. It returns a function that, when called, will cancel the subscription. When calling `onChange` inside a React component, it should be wrapped with the `useEffect` hook. As it returns an unsubscribe function, this should be returned from the `useEffect` function to ensure you don't add duplicate subscribers.. ```jsx export const MyComponent = () => { const x = useMotionValue(0) const y = useMotionValue(0) const opacity = useMotionValue(1) useEffect(() => { function updateOpacity() { const maxXY = Math.max(x.get(), y.get())
NativeAnimationOptionsExtended.motionValue.onChange: Adds a function that will be notified when the `MotionValue` is updated. It returns a function that, when called, will cancel the subscription. When calling `onChange` inside a React component, it should be wrapped with the `useEffect` hook. As it returns an unsubscribe function, this should be returned from the `useEffect` function to ensure you don't add duplicate subscribers.. ```jsx export const MyComponent = () => { const x = useMotionValue(0) const y = useMotionValue(0) const opacity = useMotionValue(1) useEffect(() => { function updateOpacity() { const maxXY = Math.max(x.get(), y.get())
ValueAnimationOptions.motionValue.onChange: Adds a function that will be notified when the `MotionValue` is updated. It returns a function that, when called, will cancel the subscription. When calling `onChange` inside a React component, it should be wrapped with the `useEffect` hook. As it returns an unsubscribe function, this should be returned from the `useEffect` function to ensure you don't add duplicate subscribers.. ```jsx export const MyComponent = () => { const x = useMotionValue(0) const y = useMotionValue(0) const opacity = useMotionValue(1) useEffect(() => { function updateOpacity() { const maxXY = Math.max(x.get(), y.get())
ValueAnimationOptionsWithRenderContext.motionValue.onChange: Adds a function that will be notified when the `MotionValue` is updated. It returns a function that, when called, will cancel the subscription. When calling `onChange` inside a React component, it should be wrapped with the `useEffect` hook. As it returns an unsubscribe function, this should be returned from the `useEffect` function to ensure you don't add duplicate subscribers.. ```jsx export const MyComponent = () => { const x = useMotionValue(0) const y = useMotionValue(0) const opacity = useMotionValue(1) useEffect(() => { function updateOpacity() { const maxXY = Math.max(x.get(), y.get())
NativeAnimationExtended.options.motionValue.onChange: Adds a function that will be notified when the `MotionValue` is updated. It returns a function that, when called, will cancel the subscription. When calling `onChange` inside a React component, it should be wrapped with the `useEffect` hook. As it returns an unsubscribe function, this should be returned from the `useEffect` function to ensure you don't add duplicate subscribers.. ```jsx export const MyComponent = () => { const x = useMotionValue(0) const y = useMotionValue(0) const opacity = useMotionValue(1) useEffect(() => { function updateOpacity() { const maxXY = Math.max(x.get(), y.get())
registry.npmjs.orgquote checked
Nemotron fixes