Optional animationA reference to the currently-controlling Popmotion animation
Private clearPrivate currentThe current state of the MotionValue.
Private eventsAn object containing a SubscriptionManager for each active event.
Optional ownerIf a MotionValue has an owner, it was created internally within Framer Motion and therefore has no external listeners. It is therefore safe to animate via WAAPI.
Private prevThe previous state of the MotionValue.
Private prevThe previous state of the MotionValue at the end of the previous frame.
Private prevThe time prevFrameValue was updated.
Private Optional stopOptional render: booleanPrivate updatedThe last time the MotionValue was updated.
This will be replaced by the build step with the latest version number. When MotionValues are provided to motion components, warn if versions are mixed.
Destroy and clean up subscribers to this MotionValue.
The MotionValue hooks like useMotionValue and useTransform automatically
handle the lifecycle of the returned MotionValue, so this method is only necessary if you've manually
created a MotionValue via the motionValue function.
Set the state of the MotionValue, stopping any active animations,
effects, and resets velocity to 0.
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..
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())
const newOpacity = transform(maxXY, [0, 100], [1, 0])
opacity.set(newOpacity)
}
const unsubscribeX = x.on("change", updateOpacity)
const unsubscribeY = y.on("change", updateOpacity)
return () => {
unsubscribeX()
unsubscribeY()
}
}, [])
return <motion.div style={{ x }} />
}
A function that, when called, will cancel this subscription.
Sets the state of the MotionValue.
Optional render: booleanWhether to notify render subscribers. Defaults to true
const x = useMotionValue(0)
x.set(10)
Optional prevFrameValue: VGenerated using TypeDoc
MotionValueis used to track the state and velocity of motion values.