Tanik

Hello. I have a timeline animation of the appearance: let timeline = gsap.timeline({ scrollTrigger: { trigger: "#about", start: "center 60%" } }); timeline.from("#about", { duration: 0.4, opacity: 0, y: -55 }); timeline.from("#about .text h3", { duration: 0.3, opacity: 0, x: 40 }); timeline.from("#about .text p", { duration: 0.3, opacity: 0, x: 40 }); And I would like to run setInterval after scrollTrigger is triggered and clear interval after #about exiting viewport: let index = 0; let images = document.querySelectorAll("#about img"); let interval = setInterval(() => { gsap.to(images[index], { duration: 0.3, opacity: 0 }); gsap.set(images[index], { top: 50, left: 30, zIndex: -1 }); gsap.to(images[index], { delay: 0.3, duration: 0.3, opacity: 1 }); index = index == 1 ? 0 : 1; gsap.to(images[index], { duration: 0.3, opacity: 0 }); gsap.set(images[index], { top: 0, left: 0, zIndex: 1 }); gsap.to(images[index], { delay: 0.3, duration: 0.3, opacity: 1 }); }, 3000); Question: How to rewrite this timeline/scrollTrigger so that I can use callbacks for intervals in them.?