Motion
Back to framer.com
DocumentationMotion values
useMotionTemplate
Motion
Back to framer.com
Design and publish your first free site today.
Getting started
  • Introduction
  • Examples
Animation
  • Overview
  • Layout
  • Gestures
  • Scroll
  • Transition
Components
  • motion
  • AnimatePresence
  • LayoutGroup
  • LazyMotion
  • MotionConfig
  • Reorder
Motion values
  • Overview
  • useMotionValueEvent
  • useMotionTemplate
  • useScroll
  • useSpring
  • useTime
  • useTransform
  • useVelocity
  • useWillChange
Hooks
  • useAnimate
  • useAnimationFrame
  • useDragControls
  • useInView
  • useReducedMotion
Universal
  • animate
  • transform
  • stagger
  • Easing functions
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Guides
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Community
  • GitHub
  • Discord

useMotionTemplate

Combine multiple motion values into a new one via string template.

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 }} />
PrevioususeMotionValueEventNextuseScroll
On this page
  • Usage

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement