Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 31x 31x 31x 31x 54x 57x 54x 54x 54x | import { MotionValue } from "." import { useMotionValue } from "./use-motion-value" import { useMultiOnChange } from "./use-on-change" import sync from "framesync" export function useCombineMotionValues<R>( values: MotionValue[], combineValues: () => R ) { /** * Initialise the returned motion value. This remains the same between renders. */ const value = useMotionValue(combineValues()) /** * Create a function that will update the template motion value with the latest values. * This is pre-bound so whenever a motion value updates it can schedule its * execution in Framesync. If it's already been scheduled it won't be fired twice * in a single frame. */ const updateValue = () => value.set(combineValues()) /** * Synchronously update the motion value with the latest values during the render. * This ensures that within a React render, the styles applied to the DOM are up-to-date. */ updateValue() /** * Subscribe to all motion values found within the template. Whenever any of them change, * schedule an update. */ useMultiOnChange(values, () => sync.update(updateValue, false, true)) return value } |