Recenter element following page scroll with transition

Question

I have a little chat widget, just a small square div that’s absolutely positioned vertically center in the browser window on page load. When the user scrolls down the page I want the widget to scroll with the page, I.e. disappear but once scrolling has stopped for the chat widget to transition back into vertical center.

I’ve searched high and low but can’t seem to find anything.

The nearest is this. Element transform transition between appearing 'relative' and 'fixed' not smooth

Any help greatly appreciated. I’d rather avoid jquery if poss and just use vanilla JS.

Cheers Richard

Answer 1

I think it will more simple if use animejs in case you want make it smooth.

let timeout;

window.addEventListener("scroll", (ev) => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    anime({
      targets: ".chat",
      top: window.scrollY + window.innerHeight / 2,
      easing: "easeOutCubic",
      duration: 500
    });
  }, 100);
});

.chat {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: red;
}
.idk {
  height: 400vh;
}

<script src="https://unpkg.com/animejs@3.2.1/lib/anime.min.js"></script>
<div class="chat">
  hello
</div>
<div class="idk">
</div>