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:
Top comments (6)
Really helpful for me. Thanks.
Thanks for this write up! Works like a charm.
I made an account just to say thanks, the only post explaining how to do this.
Thanks king
Appreciate it!
Hello, I just noticed this article. You are calling a function onAnimationEnd. Where does that come from? Is that part of tailwind? Thanks.
Vanilla in the browser: developer.mozilla.org/en-US/docs/W...