How to Animate a Waving Hand Emoji Using TailwindCSS

1/25/2022 • 914 views • 2 min read

I recently spent time polishing the mobile responsiveness 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

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

Alt Text

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