Coder Wrap provides free to use snippets

  /**Typeo CSS Start**/
  @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
  *{ box-sizing: border-box;}
  body {
  font-family: "Poppins", sans-serif;
  color: #444;
  box-sizing: border-box;
  background-color: #fff;
  }
  /**Typeo CSS End**/
  /**Animation CSS Start**/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  .animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  }
  .animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  }
  @-webkit-keyframes fadeInUp {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInUp {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  }
  }
  .fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  }
  @-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  }
  }
  .fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  }
  @-webkit-keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  }
  }
  .fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  }
  @-webkit-keyframes fadeInRight {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInRight {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  }
  }
  .fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
  }
  .cw{
  visibility: hidden;
  animation-name: none;
  }
  .animated.fadeInUp{
  visibility: visible;
  animation-name: fadeInUp;
  }
  .animated.fadeInDown{
  visibility: visible;
  animation-name: fadeInDown;
  }
  .animated.fadeInLeft{
  visibility: visible;
  animation-name: fadeInLeft;
  }
  .animated.fadeInRight{
  visibility: visible;
  animation-name: fadeInRight;
  }
  /**Animation CSS End**/
  .container {
  max-width: 1170px;
  width: 100%;
  padding: 0px 15px;
  margin: auto;
  }
  .listgrid {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  }
  .listgrid .itemgrid {
  width:33.33%;
  padding: 15px 15px;
  }

const animatedEffect = (elem) => {
let allElements = document.querySelectorAll('.cw');
let windowHeight = window.innerHeight - 120;
const elems = () => {
for (let i = 0; i < allElements.length; i++) {  //  loop through the sections
let viewportOffset = allElements[i].getBoundingClientRect();  //  returns the size of an element and its position relative to the viewport
let top = viewportOffset.top;  //  get the offset top
if(top < windowHeight){  //  if the top offset is less than the window height
 allElements[i].classList.add('animated');  //  add the class
} else{
//allElements[i].classList.remove('animated');  //  remove the class
}
}
}
elems();
window.addEventListener('scroll', elems);
}
animatedEffect();