Toggle class on Viewport using GSAP scrollTrigger plugin

This is just a code. Will add a demo soon…

// Add active class to all element on viewport
const toggleActiveOnViewport = () => {
  let elements = $(".toggleActiveOnViewport");
  
  elements.each(function() {
    let element = this;
  
    ScrollTrigger.create({
      trigger: element,
      start: "top bottom",
      end: "bottom top",
      onEnter: function() {
        element.classList.add('active');
      },
      onEnterBack: function() {
        element.classList.add('active');
      },
      onLeave: function() {
        element.classList.remove('active');
      },
      onLeaveBack: function() {
        element.classList.remove('active');
      },

      markers: false,
    });
  });
}