html

<div class="blobs">
  <div class="blob blob1"></div>
  <div class="blob blob2"></div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop" />
    </filter>
  </defs>
</svg>

js

const trigger = document.querySelector(".blob1");
const target = document.querySelector(".blob2");
trigger.addEventListener("mouseover", function () {
  target.classList.remove("is-inactive");
  target.classList.add("is-active");
});
trigger.addEventListener("mouseleave", function () {
  target.classList.remove("is-active");
  target.classList.add("is-inactive");
});

scss

.blobs {
  filter: url(#goo);
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  .blob {
    background: #469536;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    &.blob1 {
      width: 300px;
      height: 600px;
    }
    &.blob2 {
      width: 200px;
      height: 200px;
      pointer-events: none;
      transition: 1s ease-in;
      &.is-active {
        animation: show 2s ease-out forwards;
      }
      &.is-inactive {
        animation: hidden 1s linear forwards;
      }
    }
  }
}

@keyframes show {
  0% {
    transform: translateX(-50%) translateY(-50%);
  }
  60% {
    transform: translateX(-120%) translateY(-50%);
  }
  70% {
    transform: translateX(-205%) translateY(-50%) scale(1.03);
  }
  80% {
    transform: translateX(-195%) translateY(-50%) scale(1.02);
  }
  90% {
    transform: translateX(-202%) translateY(-50%) scale(1);
  }
  100% {
    transform: translateX(-200%) translateY(-50%) scale(1);
  }
}

@keyframes hidden {
  0% {
    transform: translateX(-200%) translateY(-50%);
  }
  100% {
    transform: translateX(-50%) translateY(-50%);
  }
}