function App() {
const x = useMotionValue(0);
useEffect(() => {
x.onChange(() => console.log(x.get()));
}, [x]);
return (
<Wrapper>
<button onClick={() => x.set(200)}>click me</button>
<Box style={{ x }} drag="x" dragSnapToOrigin />
</Wrapper>
);
}
function App() {
const x = useMotionValue(0);
const scale = useTransform(x, [-800, 0, 800], [0.1, 1, 2]);
return (
<Wrapper>
<Box style={{ x, scale }} drag="x" dragSnapToOrigin />
</Wrapper>
);
}
useMotionValue
,useTransform
, linear-gadient
사용function App() {
const x = useMotionValue(0);
const rotateZ = useTransform(x, [-800, 800], [-360, 360]);
const gradient = useTransform(
x,
[-800, 800],
[
"linear-gradient(135deg, rgb(0, 210, 238), rgb(0, 83, 238))",
"linear-gradient(135deg, rgb(0, 238, 154), rgb(238, 178, 0))",
]
);
return (
<Wrapper style={{ background: gradient }}>
<Box style={{ x, rotateZ }} drag="x" dragSnapToOrigin />
</Wrapper>
);
Framer Motion Docs
리액트 마스터클래스, 노마드코더