Select Page

HTML

<div class="heroSec__img replaceWithSVG fade-in fade-in-delay-0.35">Thill will get delayed for 0.35 seconds before fade in animation triggers</div>

Function

const initFadeInAnimation = () => {
  const fadeElements = document.querySelectorAll(".fade-in");
  
  fadeElements.forEach((element) => {
    let classesArray = Array.from(element.classList);
    let matchingClass = classesArray.find(className => className.startsWith("fade-in-delay-"));
    let delayValue = 0;
    if (matchingClass) {
      delayValue = matchingClass.slice("fade-in-delay-".length);
    }
    
    gsap.set(element, { opacity: 0, y: 100, duration: 1, }); // Set initial opacity to 0

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