How to animate a button on click with TailwindCSS in Next.js or React.js

#tailwindcss #nextjs #react #animate

This post will assume that you already have a working installation of Next.js or React.js and have added the TailwindCSS library, if that's not your case you can read about installing it from scratch here.

We're going to use a super simple animation of a button 'wiggling' when it's pressed, and we'll use Tailwind to create a custom animation to use it as a class in our project.

The first step is to create the animation, so if you followed step-by-step the guide at the beginning lets start by editing the tailwind.config.js file like so:

//./tailwind.config.js

module.exports = {
  purge: ["./pages/*.js"],
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          "0%, 100%": { transform: "rotate(-3deg)" },
          "50%": { transform: "rotate(3deg)" }
        }
      },
      animation: {
        wiggle: "wiggle 200ms ease-in-out"
      }
    }
  }
};

The important bit is the keyframes values inside the extend property of theme. Here we can define our CSS Transforms, for this example I added a simple rotation that simulates a 'wiggle' of the button but you can define whatever you want here.

After adding the keyframes we also need to add the animation property inside extend and here's where we'll define the name of our animation to be used later on, we're also referencing the newly created wiggle transform as a property inside the animation.

Once we have the animation created we'll use React useState to define when to show it and when to hide the animation once it's done, also take a look as how we use the animate-wiggle class which was created in the tailwind.config.js file.

Here's how I animated a button inside a generic page in Next.js:

import React, { useState } from "react";

export default function IndexPage() {
  const [effect, setEffect] = useState(false);
  return (
    <div className="flex h-screen flex-col justify-center">
      <div className="flex justify-center">
        <button
          className={`${
            effect && "animate-wiggle"
          } bg-blue-500 p-4 text-white rounded hover:bg-blue-700 hover:shadow-xl`}
          onClick={() => {
            setEffect(true);
          }}
          onAnimationEnd={() => setEffect(false)}
        >
          Wiggle wiggle...
        </button>
      </div>
    </div>
  );
}

As you can see we're using the state of effect to decide when to show the animation. We're using the onClick event to set the state to true and then the onAnimationEnd event to remove it.

If you're interested, you can play with it here: