Tanik Posted July 18, 2020 Share Posted July 18, 2020 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.? Link to comment Share on other sites More sharing options...
GreenSock Posted July 18, 2020 Share Posted July 18, 2020 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now