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",
},
});
});
}