Basic Animation

Adding Animation on Button

Normal button


<motion.button className="bg-gray-600  px-2 py-1">
  Click Me
</motion.button>

Button with a inital state and animation on background color


<motion.button
  className="bg-gray-600  px-2 py-1"
  initial={{ backgroundColor: 'red' }}
  animate={{ backgroundColor: 'blue' }}
  transition={{ delay: 1 }}
>
  Click Me
</motion.button>

Button with a scale repeat

Button with a "Spring" as animation

Bounce: 0.50

Damping: 1.00

Mass: 0.50

Velocity: 1.00



  const [bounce, setBounce] = useState(0.5)
  const [mass, setMass] = useState(0.5)
  const [damping, setDamping] = useState(1)
  const [velocity, setVelocity] = useState(1)

  <motion.button
  key={0.5-1-0.5-1}
  className="bg-gray-600  px-2 py-1"
  initial={{ scale: 1 }}
  animate={{ scale: 2 }}
  transition={{
    delay: 1,
    type: 'spring',
    bounce: bounce,
    damping: damping,
    mass: mass,
    repeat: Infinity,
    velocity: velocity,
    repeatType: 'reverse',
    repeatDelay: 0.2,
  }}
  >
  Click Me
  </motion.button>