useMotionTemplate

useMotionTemplate creates a new motion value from a string template containing other motion values.

Whenever a motion value within the string template updates, the new motion value will update with the latest value.

#Usage

Import useMotionTemplate from Framer Motion.

import { useMotionTemplate } from "framer-motion"

useMotionValue is a "tagged template literal". So rather than being called like a normal function, it's ended with a string template.

useMotionTemplate``

This string template can accept text and other motion values.

const x = useMotionValue(100)

// transform.get() === transform(100px)
const transform = useMotionTemplate`transform(${x}px)`

return <motion.div style={{ transform }} />

The latest value of the returned motion value will be the string template with each provided motion value replaced with its latest value.

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