I stumbled upon Google's new Animated Noto Emojis, and let me tell you, they are seriously impressive. These emojis aren't just your regular old static icons—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.

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.

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.

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.

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 for the full code. Happy coding and emoji picking!

Mike VardyFollow

A senior full stack web developer with over a decade of experience creating engaging web experiences for top brands using React and Node.JS