createMotionValueSignal
MotionValues live outside Solid's reactive graph — they update on motion's frameloop, so reading
.get() inside createMemo, JSX, or an effect never registers a dependency.
createMotionValueSignal is the deliberate bridge across that boundary: it mirrors a
MotionValue into a signal, unsubscribing when the owning scope is disposed.
import { createMotionValue, createMotionValueSignal, motion } from 'motion-solidjs'
import { createMemo } from 'solid-js'
const x = createMotionValue(0)
const x$ = createMotionValueSignal(x)
const isFar = createMemo(() => Math.abs(x$()) > 100)
return (
<>
<motion.div drag="x" style={{ x }} />
<span>
{x$().toFixed(1)} {isFar() ? '· far!' : ''}
</span>
</>
)
Two notes:
- Cost: a value driven by an animation or drag pushes ~60 updates per second through the
graph while it moves. That's fine for a readout or a derived flag; think twice before hanging
heavy memos off it. To go the other direction — or stay on the frameloop entirely — use
createTransform. - Relation to
from: this is the same shape as Solid'sfrom(...), with the initial value read synchronously instead of startingundefined.