DEV Community

Cover image for How to Animate a Waving Hand Emoji in TailwindCSS
Alex Kates
Alex Kates

Posted on • Updated on • Originally published at alexkates.dev

How to Animate a Waving Hand Emoji in TailwindCSS

I recently spent time polishing the mobile reponsivness for my personal site, https://alexkates.dev, and I wanted to add a little animation flair to some empty space next to my Hero introduction.

👋 TL;DR 👋

I made the waving hand emoji actually wave using TailwindCSS.
You can find the source code here.
Alt Text

Setup

The majority of the Setup is taken from the TailwindCSS setup guide. The most jarring part is the use of Craco instead of the standard react-scripts.

Scaffold CRA, TailwindCSS and Craco

npx create-react-app waving-hand-tailwind

cd waving-hand-tailwind

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

npm install @craco/craco
Enter fullscreen mode Exit fullscreen mode

Update package.json

Alt Text

Configure craco.config.js

Alt Text

Configure tailwind.config.js

Alt Text

Include TailwindCSS in index.css

Alt Text

Build

Create the Wave Animation

Let's break down what is happening here.

We are extending the TailwindCSS configuration in order to bake in a new animation.

The keyframes section defines exactly how the animation transforms during the lifetime of the animation. At 0%, rotate 0 degrees; at 15%, rotate 14 degrees, etc.

Finally, the animation definition for wave to use the wave keyframes, transform for 1.5s, and loop infinitely.

Alt Text

Update App.js

Lastly, let's add a new span with the hand emoji.

Alt Text

Start Your App

npm start
Enter fullscreen mode Exit fullscreen mode

Alt Text

Thanks for reading! If you found this useful feel free to follow me on twitter.

Top comments (0)