Call a function whenever a motion value changes.

useRelativeCallback.tsx

import * as React from "react"
import { useLayoutEffect } from "react"
import { MotionValue } from "framer"
import { throttle } from "./throttle"

export function useMotionCallback<K>(
    parents: (MotionValue | number | boolean)[],
    callback: (...parents) => K,
    throttleStep = 16
) {
    React.useEffect(() => {
        const handleChange = () =>
            throttle(callback(...parents.map(toValue)), throttleStep)

        handleChange()

        const removers = parents
            .map(v => isMotionValue(v) && v.onChange(handleChange))
            .filter(v => v) as (() => void)[]

        return () => removers.forEach(fn => fn())
    }, [...parents, callback])
}

// HELPERS

export const isMotionValue = (value: any): value is MotionValue => {
    return value instanceof MotionValue
}

const toValue: <T>(v: MotionValue<T> | T) => T = v =>
    isMotionValue(v) ? v.get() : v