· react,fullstack,github

I created a mini-app to create an effect on a box when I click the button below it.

Once the button clicked, the box bumped.

Say it is animated as if it was pushed and its borders go over the edges.

Technically it uses of course CSS animation:

with the related keyframes.

But the bump state of the box has to be reset so that the next click on the button rebumps the box. This is handled with React features:

  • 👉 useState
  • 👉 useEffect
  • 👉 setTimeout