<header class="container">
  <h1>Throtting Animating on Scroll with Vanilla JavaScript</h1>
  <h2>Scroll to see the effects
    <p class="animate-arrow">&darr;
    </p>
  </h2>
</header>
<section class="scroll-container">
  <div class="scroll-element js-scroll fade-in">

  </div>
  <div class="scroll-caption">
    This animation fades in.
  </div>
</section>
<section class="scroll-container">
  <div class="scroll-element js-scroll fade-in-bottom">

  </div>
  <div class="scroll-caption">
    This animation slides in to the top.
  </div>
</section>
<section class="scroll-container">
  <div class="scroll-element js-scroll slide-left">

  </div>
  <div class="scroll-caption">
    This animation slides in from the left.
  </div>
</section>
<section class="scroll-container">
  <div class="scroll-element js-scroll slide-right">

  </div>
  <div class="scroll-caption">
    This animation slides in from the right.
  </div>
</section>
<section class="throttle-container">
  <p>
    Scroll event is called <span id="scroll-count">0</span> times
  </p>
  <p>
    Throttle event is called <span id="throttle-count">0</span> times
  </p>
</section>
<footer>
  <p>Animation styles from <a href="https://animista.net" target="_blank">animista.net</a></p>
  <p>
    Pen by <a href="https://www.jemimaabu.com" target="_blank">Jemima Abu</a><span style="color: #D11E15"> &#9829;</span>
  </p>
</footer>

@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected];700&display=swap');

/*General styling for structure*/
body {
  margin: 0;
  font-family: "Inter", sans-serif;
}

.container {
  max-width: 1280px;
  width: 95%;
  margin: 0 auto;
}

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Inter", sans-serif;
  height: 100vh;
}

header h2 {
  font-weight: 400;
}

.scroll-container {
  height: 100vh;
  min-height: 450px;
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.scroll-container:nth-of-type(1) {
  background-color: #75caa1;
}
.scroll-container:nth-of-type(2) {
  background-color: #eb5c40;
}
.scroll-container:nth-of-type(3) {
  background-color: #f5ca45;
}
.scroll-container:nth-of-type(4) {
  background-color: #569ff8;
}

.scroll-container:nth-of-type(even) {
  flex-direction: row-reverse;
}

.scroll-element,
.scroll-caption {
  width: 50%;
}

.scroll-element {
  min-height: 300px;
  height: 100%;
  background-color: #eaeaea;
}

.scroll-caption {
  margin: 1rem;
}

.throttle-container {
  position: fixed;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  width: 100%;
  padding: 0.5em 1em;
}

.throttle-container p {
  margin: 0.125em 0;
}

footer {
  text-align: center;
  padding: 0.5rem 0;
  background-color: #faddad;
}

footer p {
  font-size: 0.75rem;
  margin: 0.25rem 0;
  color: #221133;
}

footer a {
  text-decoration: none;
  color: inherit;
}

@media screen and (max-width: 650px) {
  .scroll-container,
  .scroll-container:nth-of-type(even) {
    flex-direction: column;
    align-content: inherit;
  }

  .scroll-element {
    height: 100%;
  }

  .scroll-element,
  .scroll-caption {
    width: 100%;
  }
}
/**Styling scrollable elements*/

.js-scroll {
  opacity: 0;
  transition: opacity 500ms;
}

.js-scroll.scrolled {
  opacity: 1;
}

.scrolled.fade-in {
  animation: fade-in 1s ease-in-out both;
}

.scrolled.fade-in-bottom {
  animation: fade-in-bottom 1s ease-in-out both;
}

.scrolled.slide-left {
  animation: slide-in-left 1s ease-in-out both;
}

.scrolled.slide-right {
  animation: slide-in-right 1s ease-in-out both;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-2-11 23:32:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

const scrollElements = document.querySelectorAll(".js-scroll");
const throttleCount = document.getElementById('throttle-count');
const scrollCount = document.getElementById('scroll-count');

var throttleTimer;

const throttle = (callback, time) => {
  if (throttleTimer) return;

	throttleTimer = true;
	setTimeout(() => {
    callback();
		throttleTimer = false;
	}, time);
}

const elementInView = (el, dividend = 1) => {
  const elementTop = el.getBoundingClientRect().top;

  return (
    elementTop <=
    (window.innerHeight || document.documentElement.clientHeight) / dividend
  );
};

const elementOutofView = (el) => {
  const elementTop = el.getBoundingClientRect().top;

  return (
    elementTop > (window.innerHeight || document.documentElement.clientHeight)
  );
};

const displayScrollElement = (element) => {
  element.classList.add("scrolled");
};

const hideScrollElement = (element) => {
  element.classList.remove("scrolled");
};

const handleScrollAnimation = () => {
  scrollElements.forEach((el) => {
    if (elementInView(el, 1.25)) {
      displayScrollElement(el);
    } else if (elementOutofView(el)) {
      hideScrollElement(el)
    }
  })
}
var timer=0;
var count=0;
var scroll = 0;

window.addEventListener("scroll", () => { 
  scrollCount.innerHTML = scroll++;
  throttle(() => {
    handleScrollAnimation();
    throttleCount.innerHTML = count++;
  }, 250);
});