Emoji Rain Effect

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

<div data-emoji-rain-container class="emoji-rain-container">
  <div class="single-rain-emoji hidden">
    <div class="single-rain-emoji-image-fire"></div>
    <div class="single-rain-emoji-image-love"></div>
    <div class="single-rain-emoji-image-shame"></div>
    <div class="single-rain-emoji-image-thumbs-down"></div>
  </div>
</div>
<div class="btn-wrap">
  <div data-hover data-emoji-rain-type-1="fire" data-emoji-rain-type-2="love" class="emoji-rain-btn"><span>Emoji Rain Fire & Love</span></div>
  <div data-hover data-emoji-rain-type-1="thumbs-down" data-emoji-rain-type-2="shame" class="emoji-rain-btn"><span>Thumbs Down & Shame</span></div>
</div>

.emoji-rain-container {
  z-index: 150;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  position: fixed;
  inset: 0%;
  overflow: hidden;
}

.single-rain-emoji {
  will-change: transform;
  width: max(200px, 15vw);
  position: absolute;
}

.single-rain-emoji.hidden {
  opacity: 0;
}

.single-rain-emoji-image-fire {
  background-image: url('../images/icon-3d-fire.png');
  background-position: 50%;
  background-size: cover;
  width: 100%;
  padding-top: 100%;
}

.single-rain-emoji-image-love {
  background-image: url('../images/icon-3d-love.png');
  background-position: 50%;
  background-size: cover;
  width: 100%;
  padding-top: 100%;
}

.single-rain-emoji-image-shame {
  background-image: url('../images/icon-3d-shame.png');
  background-position: 50%;
  background-size: cover;
  width: 100%;
  padding-top: 100%;
}

.single-rain-emoji-image-thumbs-down {
  background-image: url('../images/icon-3d-thumbsup.png');
  background-position: 50%;
  background-size: cover;
  width: 100%;
  padding-top: 100%;
  rotate: 180deg;
}

.btn-wrap {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-flow: column;
  align-items: center;
  display: flex;
}

.emoji-rain-btn {
  grid-column-gap: .125em;
  grid-row-gap: .125em;
  cursor: pointer;
  background-color: #fff;
  border-radius: 10em;
  align-items: center;
  padding: .5em .75em .5em 1em;
  font-family: PP Neue Corp Normal, Arial, sans-serif;
  font-size: 2.5em;
  font-weight: 700;
  transition-property: all;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(.45, .422, .269, 1.702);
  display: flex;
  transform: scale(1)rotate(.001deg);
}

.emoji-rain-btn:hover {
  transform: scale(1.05)rotate(.001deg);
}

let emojiAnimationRunning = false;

function initEmojiRain(emojiTypes, emojiContainer) {
  if (emojiAnimationRunning) return;

  emojiAnimationRunning = true;

  const emojiContainerHeight = emojiContainer.offsetHeight;
  const emojiQuantity = 60;

  const getRandomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

  const createEmojiElement = () => {
    const emojiScale = Math.random() * 0.6 + 0.4;
    const emojiRotate = getRandomInt(1, 5);
    const emojiDelay = 0.001 * getRandomInt(0, 1250);
    const emojiSpeed = getRandomInt(500, 1500) * 0.001;
    const emojiPosition = `${getRandomInt(0, 10)}0%`;
    const emojiClass = `single-rain-emoji-image-${emojiTypes[Math.floor(Math.random() * emojiTypes.length)]}`;

    const singleEmoji = document.createElement("div");
    singleEmoji.className = "single-rain-emoji append";
    singleEmoji.style.left = emojiPosition;

    const singleEmojiChild = document.createElement("div");
    singleEmojiChild.className = emojiClass;
    singleEmoji.appendChild(singleEmojiChild);

    gsap.fromTo(
      singleEmoji,
      { y: emojiContainerHeight, xPercent: -50, rotate: 0.001, scale: emojiScale },
      { y: "-100%", xPercent: -50, rotate: 0.001, delay: emojiDelay, ease: "Power1.easeIn", duration: emojiSpeed }
    );

    gsap.fromTo(
      singleEmojiChild,
      { xPercent: -25, rotate: emojiRotate },
      { xPercent: 25, rotate: -emojiRotate, ease: "Power1.easeInOut", delay: emojiDelay, duration: 0.8, repeat: -1, yoyo: true }
    );

    emojiContainer.appendChild(singleEmoji);
  };

  Array.from({ length: emojiQuantity }).forEach(createEmojiElement);

  setTimeout(() => {
    emojiContainer.querySelectorAll(".single-rain-emoji.append").forEach(el => el.remove());
    emojiAnimationRunning = false;
  }, 2750);
}

function initEmojiRainActions() {
  document.querySelectorAll("[data-emoji-rain-type-1]").forEach(trigger => {
    trigger.addEventListener("click", () => {
      const type1 = trigger.getAttribute("data-emoji-rain-type-1");
      const type2 = trigger.getAttribute("data-emoji-rain-type-2") || type1;
      const emojiContainer = document.querySelector("[data-emoji-rain-container]");

      if (!emojiContainer) {
        console.warn("No emoji rain container found with [data-emoji-rain-container]");
        return;
      }

      initEmojiRain([type1, type2], emojiContainer);
    });
  });
}

document.addEventListener("DOMContentLoaded", initEmojiRainActions);