Function useMotionTemplate

Combine multiple motion values into a new one using a string template literal.

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 }} />
}
Copy