YaiViewport - a lightweight, Observer-free viewport tracker

HTML

<section class="feature" id="hero">
  <h1>YaiViewport</h1>
  <p><b>A lightweight, Observer-free viewport tracker that runs on the YEH event layer.</b></p>
</section>
<section class="feature" id="stats"></section>
<section class="feature" id="cta">
  <p><a target="_blank" href="https://github.com/yaijs/yai?tab=readme-ov-file#yaiviewport--advanced-viewport-tracking-observer-free">Check on GitHub</a></p>
</section>

<script type="module">
  import {
    YaiViewport
  } from 'https://yaijs.github.io/yai/utils/yai-viewport.js';

  const yvp = new YaiViewport();

  // Track by selector or nodes/arrays
  yvp.track('.feature');

  // React to visibility transitions
  yvp
    .hook('elementVisible', ({ element }) => element.classList.add('fade-in'))
    .hook('elementLeavingTop', ({ element }) => element.classList.add('slide-out-up'))
    .hook('elementLeavingBottom', ({ element }) => element.classList.add('slide-out-down'));
</script>

CSS

.feature {
  margin: 1rem 0;
  padding: 2rem;
  border: 2px solid red;
  height: 880px;
  opacity: .3;
  transition: all .4s ease-in-out .5s;
}
.feature.yvp-is-visible {
  opacity: 1;
  border-color: rgb(25, 130, 25);
  background-color: rgba(98, 238, 98, 0.665);
}