70 %
Chris Biscardi

Smooth scrolling hero title transitions with Framer Motion

A MotionValue can be initialized with a value that we control.

JS
import { motion, useMotionValue } from "framer-motion"


export function MyComponent() {
  const x = useMotionValue(0)
  return <motion.div style={{ x }} />
}

It can also be

JS
const x = useMotionValue(0)
const input = [-200, 0, 200]
const output = [0, 1, 0]
const opacity = useTransform(x, input, output)


return <motion.div drag="x" style={{ x, opacity }} />