Fade-in animation using scrollTrigger – GSAP

Here is a function that you can initiate to fade in up elements with class “fade-in” on viewport.

 const initFadeInAnimation = () => {
  const fadeElements = document.querySelectorAll(".fade-in");
  fadeElements.forEach((element) => {
    gsap.set(element, { opacity: 0, y: 100, duration: 1, }); // Set initial opacity to 0

    gsap.to(element, {
      opacity: 1,
      y: 0,
      duration: 1,
      scrollTrigger: {
        trigger: element,
        start: "top 80%",
        end: "bottom 80%",
        toggleActions: "play none none reverse",
        
      },
    });
  });
}