Motion value
Motion value এর মাধ্যমে আমরা সহজেই animation state track রেখে নিজেদের মত control করে animation করাতে পারি।
নিচের component এ একটি counter বানানো হয়েছে। যেটার initial value 0 সেটা useMotionValue hook এর মাধ্যমে সেট করা হয়েছে। useTransform hook এর মাধ্যমে value change করা হয়, 1st arg এ initial value দিতে হয়, আর 2nd arg এ একটি function দিতে হয় যেটার মাধ্যমে value টা transform হবে। আমরা Math.round function reference দিছি যাতে useEffect এর মধ্যে animate এর মাধ্যমে যে 100 পর্যন্ত count করবো সেটা 0 থেকে 100 এ যাওয়ার সময় সবসময় round number return করে।
// dependencies
import { animate, motion, useMotionValue, useTransform } from "framer-motion";
import { useEffect } from "react";
const MotionValue = () => {
// initial value
const count = useMotionValue(0);
// data modifier
const modifiedValue = useTransform(count, Math.round);
useEffect(() => {
// animation define
const animation = animate(count, 100, { duration: 2 });
// stop animation on unmount
return animation.stop;
}, [count]);
return (
<div className="container my-10">
<motion.div className="text-2xl">{modifiedValue}</motion.div>
</div>
);
};
export default MotionValue;