gsap-helper/src/animateOnScroll.js

Animate elements on scroll with GSAP

// animateOnScroll.js

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export function animateOnScrollFade() {
  if (document.getElementsByClassName('animate-on-scroll-fade').length > 0) {
    gsap.utils.toArray(".animate-on-scroll-fade").forEach(element => {
      const duration = element.dataset.duration ? parseFloat(element.dataset.duration) : 1;
      const delay = element.dataset.delay ? parseFloat(element.dataset.delay) : 0;
      const start = element.dataset.start ? element.dataset.start : "top 80%";

      gsap.fromTo(element, {
        opacity: 0
      }, {
        duration: duration,
        delay: delay,
        opacity: 1,
        ease: "sine.inOut",
        scrollTrigger: {
          trigger: element,
          start: start,
          toggleActions: "play none none reverse"
        }
      });
    });
  }
}