Intersection Observer

Intersection Observer.txt

// Include intersection-observer-polyfill.js for older browsers
// https://github.com/w3c/IntersectionObserver/tree/master/polyfill


// JS:

// Get scroll direction
var lastScrollTop = 0, delta = 5;
var lastScrollDirection = null;
$(window).scroll(function(event){
   var st = $(this).scrollTop();

   if(Math.abs(lastScrollTop - st) <= delta)
      return;

   if (st > lastScrollTop){
       // downscroll code
       lastScrollDirection = "down";
   } else {
      // upscroll code
      lastScrollDirection = "up";
   }
   lastScrollTop = st;
});

// Start IntersectionObserver
const animatedElements = document.querySelectorAll('.animate-me');

observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
    entry.target.classList.add('in-view');
    entry.target.classList.remove('not-in-view');
  }
  });
});

animatedElements.forEach(animatedElement => {
  observer.observe(animatedElement);
});
// end IntersectionObserver

// SCSS:

/// Transitions

@mixin transition-on-scroll-initial {
  @include media(">sm") {
    transition: all 1s;
    transform: translate(0,50px);
    opacity: 0;
  }
}

@mixin transition-on-scroll-end {
  @include media(">sm") {
    transition: all 1s;
    transform: translate(0,0);
    opacity: 1;
  }
}


html.js .not-in-view {
  @include transition-on-scroll-initial;
}

.in-view {
  @include transition-on-scroll-end;
}