ANIMATIONS ON SCROLL

by davidxmartins

HTML

<h1>
ANIMATIONS ON SCROLL
</h1>

<div class="container">

<div class="slide-up">
<h2>
SLIDING UP
</h2>
</div>
<div class="slide-in-fromleft">
<h2>
SLIDING RIGHT
</h2>
</div>
<div class="slide-in-fromright">
<h2>
SLIDING LEFT
</h2>
</div>
<div class="zoom">
<h2>
ZOOM
</h2>
</div>

</div>

CSS

/* Slide-Up */

.slide-up {
  opacity: 0;
  transform: translateY(50px) scale(1);
  transition: opacity 1s, transform 0.8s;
}
.slide-up.animate {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Zoom */

.zoom {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 1s, transform 0.8s;
}
.zoom.animate {
  opacity: 1;
  transform: scale(1);
}

/* Slide In from the Left */

.slide-in-fromleft {
  opacity: 0;
  transform: translateX(-20%);
  transition: transform 1s, opacity 1s;
}
.slide-in-fromleft.animate {
  opacity: 1;
  transform: translateX(0);
}

/* Slide In from the Right */

.slide-in-fromright {
  opacity: 0;
  transform: translateX(20%);
  transition: transform 1s, opacity 1s;
}
.slide-in-fromright.animate {
  opacity: 1;
  transform: translateX(0);
}

/* ///////////////////// */

.container {
  margin: 0;
  padding: 1000px 0 500px 0;
  display: flex;
  flex-direction: column;
}
div {
  margin: 50px auto;
  }

body {
  font-family: sans-serif;
  font-size: 80px;
  text-align: center;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    var observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate');
        } else {
          entry.target.classList.remove('animate');
        }
      });
    }, { threshold: [0.4] });
  
    var elements = document.querySelectorAll('.page-name, .slide-up, .zoom, .slide-in-fromleft, .slide-in-fromright, .illustration-animation, .zoom-soft, .client__section, .animatedLine');
    elements.forEach(function(el) {
      observer.observe(el);
    });
  });