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 38 39 40 41 42 43 44 45 46 47 48 49 | 30x 30x 28x 8x 17x 17x 43x 43x 43x 17x 8x | import { MotionValue } from "." import { useCombineMotionValues } from "./use-combine-values" /** * Combine multiple motion values into a new one using a string template literal. * * ```jsx * import { * motion, * useSpring, * useMotionValue, * useMotionTemplate * } from "framer-motion" * * function Component() { * const shadowX = useSpring(0) * const shadowY = useMotionValue(0) * const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))` * * return <motion.div style={{ filter: shadow }} /> * } * ``` * * @public */ export function useMotionTemplate( fragments: TemplateStringsArray, ...values: MotionValue[] ) { /** * Create a function that will build a string from the latest motion values. */ const numFragments = fragments.length function buildValue() { let output = `` for (let i = 0; i < numFragments; i++) { output += fragments[i] const value = values[i] if (value) output += values[i].get() } return output } return useCombineMotionValues(values, buildValue) } |