How to rewrite this code so that I can use callbacks in scrollTrigger?

[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.?

[GreenSock]

I'm struggling to understand what you're trying to do with your interval, as the code makes it look like you're fading an element out...and then immediately back in (same image). And then there's an alternate image that also does exactly the same thing (out and then back in) simultaneously, but with different top/left/zIndex settings. When I try to visualize that, it seems quite odd to me, but I'm probably missing something.

 

You probably don't need to use setInterval() at all - that kind of thing can almost always be done by just using GSAP. Either delayedCalls or a repeating timeline. 

 

To answer your question, it's quite easy to trigger something when the element enters the ScrollTrigger area and then when it leaves. Just use onEnter and onLeave callbacks. 

 

If you still need some help, please provide a minimal demo in CodePen or JSFiddle or something so that we can see things in context. We'd be happy to help, but it's tough without any demo.