Normal button
1
2<motion.button className="bg-gray-600 px-2 py-1">
3 Click Me
4</motion.button>
5 Button with a inital state and animation on background color
1
2<motion.button
3 className="bg-gray-600 px-2 py-1"
4 initial={{ backgroundColor: 'red' }}
5 animate={{ backgroundColor: 'blue' }}
6 transition={{ delay: 1 }}
7>
8 Click Me
9</motion.button>
10 Button with a scale repeat
1
2<motion.button
3 className="bg-gray-600 px-2 py-1"
4 initial={{ scale: 1 }}
5 animate={{ scale: 2 }}
6 transition={{
7 delay: 1,
8 ease: 'easeInOut',
9 repeat: Infinity,
10 repeatType: 'reverse',
11 repeatDelay: 0.2,
12 }}
13>
14 Click Me
15</motion.button>
16 Button with a "Spring" as animation
1
2
3 const [bounce, setBounce] = useState(0.5)
4 const [mass, setMass] = useState(0.5)
5 const [damping, setDamping] = useState(1)
6 const [velocity, setVelocity] = useState(1)
7
8 <motion.button
9 key={0.5-1-0.5-1}
10 className="bg-gray-600 px-2 py-1"
11 initial={{ scale: 1 }}
12 animate={{ scale: 2 }}
13 transition={{
14 delay: 1,
15 type: 'spring',
16 bounce: bounce,
17 damping: damping,
18 mass: mass,
19 repeat: Infinity,
20 velocity: velocity,
21 repeatType: 'reverse',
22 repeatDelay: 0.2,
23 }}
24 >
25 Click Me
26 </motion.button>
27