Build a Animated Emoji Selector /w React, Noto & Lottie Animations
Tags: codepen, react, tutorial, design
Published: 2023-08-26 22:53:02

<figure>
  <figcaption>Cover Photo by <a href="https://unsplash.com/@domingoalvarze?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Domingo Alvarez E</a> on <a href="https://unsplash.com/photos/Cs3y8Mn6-Gk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  </figcaption>
</figure>

I stumbled upon Google's new Animated [Noto Emojis](https://fonts.google.com/noto/specimen/Noto+Color+Emoji), and let me tell you, they are seriously impressive. These emojis aren't just your regular old static icons&mdash;they come alive with buttery smooth animations, all thanks to the power of Lottie.

As I was checking them out, a thought struck me: "_Wouldn't it be cool if there was a easier way to explore these?_" And that's when I had my lightbulb moment. I decided to put whip something quick together, the end result turned out really fun. 

You can actually play around with a live demo of below. Trust me, it's an absolute blast. Go ahead and give it a spin.

{% codepen https://codepen.io/mike-at-redspace/pen/PoXPrgQ %}

## What are LottieFiles?

Lottie is a file format for animations, using JSON. This format makes it incredibly simple to include animations on various platforms, just like you would with static images. These files are compact and function seamlessly on all sorts of devices. 

They're flexible too! Just like SVG and other vector formats, you can adjust their size without worrying about losing image quality.

***

## Designing the Emoji Dropdown

Our journey kicks off with designing the emoji dropdown. Now, to keep our code organized and our development experience smooth, we'll start by creating a separate component called `EmojiDropdown`. This component will take care of all the nitty-gritty details involved in selecting an emoji.


![EmojiDropdown.js code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0k9tpj3i4j392gbszd8.png)

***

##  Making Emojis Come Alive: The Emoji Display

Next up, we're building the `EmojiDisplay` component. This is where the magic happens! With the Lottie animation library included and the Google Font CDN path, we'll animate the selected emoji and bring it to life.


![EmojiDisplay.js code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjq1rfdlifa0wfh3eg9c.png)

***

## Crafting the UI: The Main `EmojiSelector`
Now it's time to put the pieces together. In this step, we'll craft the main event: the `EmojiSelector` component. With this component, we manage emoji selection and the open/closed state of our dropdown.


![EmojiSelector.js code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x40ov7hwbw8rau0lgt1w.png)

***

High-fives, you've unlocked the secrets of building an awesome emoji selector component for Google's new Noto Animated Font. 

Head over to the [CodePen](https://codepen.io/mike-at-redspace/pen/PoXPrgQ) for the full code. Happy coding and emoji picking!

***

{% user mike-at-redspace %}

<figure>
  <figcaption>
If you're interested in learning more about animated emojis, I highly recommend checking out Jennifer Daniel's blog post titled [Updates to Emoji: New Characters, New Animation, New Color Customization, and More!](https://developers.googleblog.com/2022/09/updates-to-emoji-new-characters-animation-colors-and-more.html)
  </figcaption>
</figure>