70 %

Smooth scrolling hero title transitions with Framer Motion

  • MotionValue

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