Detect scroll direction using gsap.

scroll-direction-indicator.js

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

function initScrollDirectionIndicator() {
  // GSAP Plugins
  gsap.registerPlugin(ScrollTrigger);

  /*----------------------------
	Elements
	----------------------------*/

  const body = document.querySelector('body');

  /*----------------------------
  Fixed Nav
  ----------------------------*/
  ScrollTrigger.create({
    markers: false,
    trigger: body,
    start: 'top -20%',
    onUpdate: self => {
      if (self.direction === 1) {
        body.classList.add('scrolling-down');
        body.classList.remove('scrolling-up');
      } else {
        body.classList.add('scrolling-up');
        body.classList.remove('scrolling-down');
      }
    },
    onLeaveBack: () => {
      body.classList.remove('scrolling-up');
    },
  });
}

/*-------------------------------
Init
-------------------------------*/

document.addEventListener('DOMContentLoaded', event => {
  initScrollDirectionIndicator();
});