useMotionValueEvent

useMotionValueEvent runs a callback when a motion value changes or when an animation on it starts, completes or is cancelled. useMotionValueState, on the same page, reads a motion value as a Solid accessor.

Usage

import { useMotionValue, useMotionValueEvent } from "@motion-s/solid"

const x = useMotionValue(0)

useMotionValueEvent(x, "change", (latest) => {
    console.log("x is now", latest)
})

The subscription lasts as long as the component, or whatever owner the hook is called in. It ends when the owner is disposed.

The callback runs when Motion notifies, outside Solid's scheduler. Writing a signal in it is fine: the update is applied by Solid like any other write.

The first argument can be an accessor of a motion value. The subscription then moves to whichever motion value the accessor returns:

useMotionValueEvent(
    () => (vertical() ? y : x),
    "change",
    (latest) => save(latest)
)

useMotionValueState

useMotionValueState(value) returns a read-only Solid accessor of a motion value. Use it where Solid needs the value: <Show>, memos, effects and the text of plain elements.

import { useMotionValueState, useScroll } from "@motion-s/solid"
import { Show } from "solid-js"

const { scrollYProgress } = useScroll()
const progress = useMotionValueState(scrollYProgress)

<span>{Math.round(progress() * 100)}%</span>
<Show when={progress() > 0.99}>You reached the end</Show>

• It's updated through Solid's scheduler: after a change, it's read with the new value once Solid has applied its updates, and a held transition holds it like any other signal.
• It's read-only. Change the value with the motion value's set or jump, or animate it.
• It accepts an accessor of a motion value, to switch which one it reads.
• It unsubscribes when its owner is disposed. It never destroys the motion value.
• On the server, it returns the motion value's current value and doesn't subscribe.

The demo below logs the animation events of x and shows its value through an accessor. Press "Move" twice quickly to cancel an animation:

API reference

function useMotionValueEvent<
    V,
    EventName extends keyof MotionValueEventCallbacks<V>
>(
    value: MaybeAccessor<MotionValue<V>>,
    event: EventName,
    callback: MotionValueEventCallbacks<V>[EventName]
): void

function useMotionValueState<T>(
    value: MaybeAccessor<MotionValue<T>>
): Accessor<T>

• value: a motion value, or an accessor of one.
• event: "change", "animationStart", "animationComplete", "animationCancel" or "destroy".
• callback: called with the latest value for "change", without arguments for the others.

useMotionValueEvent returns nothing. useMotionValueState returns an Accessor<T> of the motion value's latest value.