DEV Community

Cover image for Crafting interactive reactions similar to Google Meet using HTML, CSS, and Vanilla JavaScript
Rodrigo Antunes
Rodrigo Antunes

Posted on • Updated on

Crafting interactive reactions similar to Google Meet using HTML, CSS, and Vanilla JavaScript

TL;DR
Let's build this: https://codepen.io/rodrigoant/full/RwOpeKG

In today's landscape of competing frameworks, where an abundance of dependencies often takes center stage, it's easy to overlook the power and simplicity of pure JavaScript for creating interactive elements. Rather than getting caught up in the search for the "10 Best JavaScript Animation Libraries," let's explore how to implement interactive reactions similar to those in Google Meet using HTML, CSS, and vanilla JavaScript.

The Idea

The concept aims to replicate the reactions feature found in Google Meet, allowing users to express their feelings with a single click. The implementation involves presenting a list of emojis and animating them to appear inside a container when clicked.

HTML

Only a container and an unordered list of emoji is enough.
edit: Adding buttons is better for accessibility, thanks to @thomasbnt for the indirect suggestion ❀️

<div class="emoji-container"></div>

<div class="emoji-list">
  <ul>
    <li>
      <button aria-label="Heart emoji">
        πŸ’–
      </button>
    </li>
    <li>
      <button aria-label="Thumbs up emoji">
        πŸ‘
      </button>
    </li>
    <li>
      <button aria-label="Party popper emoji">
        πŸŽ‰
      </button>
    </li>
    <!-- Other emojis -->
  </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

Regarding the CSS, there's nothing particularly revolutionary, but there's one notable aspect I'd like to mention: the use of will-change. It's important to note that according to the MDN Docs, will-change is typically recommended as a last resort for addressing performance issues. However, in pursuit of achieving the smoothest animation possible, I opted to include it.
Additionally, it's worth mentioning that the element is removed from the DOM after the animation completes, which should help ensure optimal performance.

.emoji-animate {
  /* ... */
  will-change: transform;
}
Enter fullscreen mode Exit fullscreen mode

Javascript

By utilizing a constructor to organize tasks efficiently, along with the Web Animations API, smooth animations are achieved without the need of requestAnimationFrame or external dependencies. This approach enhances code organization and simplifies the animation process.

class EmojiAnimate {
  constructor() {
    this.emojis = document.querySelectorAll(".emoji-list button");
    this.container = document.querySelector('.emoji-container');
    this.handleEmojiClick = this.handleEmojiClick.bind(this);
    this.addEventListeners();
  }

  addEventListeners() {
    this.emojis.forEach(emoji => emoji.addEventListener('click', this.handleEmojiClick));
  }

  handleEmojiClick(e) {
    // Logic for handling emoji click and animation is below
  }
}

new EmojiAnimate();

Enter fullscreen mode Exit fullscreen mode

Animating the Emojis

When an emoji is clicked, I dynamically create a new element to hold the emoji, position it inside the container, and animate its movement up towards the middle of the screen, while also adjusting its opacity.

  handleEmojiClick(e) {

    // create new element to hold emoji
    const emojiEl = document.createElement('div');
    emojiEl.classList.add('emoji-animate');

    // get emoji from clicked element
    const { innerHTML } = e.target;
    emojiEl.innerHTML = innerHTML;

    // place the element inside the container
    this.container.appendChild(emojiEl);

    // get dynamic positions
    const {height, left} = e.target.getBoundingClientRect();
    const {bottom, top, width} = this.container.getBoundingClientRect();

   // animation πŸƒ
    const animation = emojiEl.animate([
      { opacity: 1, transform: `translate(${left}px, ${bottom}px)`},
      { opacity: 0, transform: `translate(${width / 2}px, ${top - height}px)`},
    ], {
      duration: 2000, 
      easing: 'cubic-bezier(.47,.48,.44,.86)'
    });

    // remove element once has finished animating
    animation.onfinish = () => emojiEl.remove();
  }
Enter fullscreen mode Exit fullscreen mode

That's it

By leveraging the fundamentals of HTML, CSS, and JavaScript, that's how to create interactive reactions without relying on external dependencies. This approach not only enhances the understanding of web development but also offers a lightweight and customizable solution for adding interactive elements to web applications. It serves as a proof of concept, reflecting the methodology likely employed in the development process before approving such functionality.

Feel free to experiment with the code provided and customize it further to suit your specific needs.

Happy coding!

Top comments (6)

Collapse
 
thomasbnt profile image
Thomas Bnt β˜•

Cute buttons!

Collapse
 
rodrigoantunes profile image
Rodrigo Antunes • Edited

Thank you.
Actually your comment reminded me of something. The use of <button> tags would increase accessibility. I might add this so the buttons can be focused by keyboard ❀️

Collapse
 
thomasbnt profile image
Thomas Bnt β˜•

Thanks for the mention! πŸ™ŒπŸš€

Collapse
 
abhi_1631 profile image
Abhijeet

It's a great idea. I will try to use this in one of my future projects.

Collapse
 
mezieb profile image
Okoro chimezie bright

Thanks i love the buttons,nice work

Collapse
 
jeffchavez_dev profile image
Jeff Chavez

Nice. Refreshing!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.