In between the page we are creating another animation (Anim2) on page scroll. Once we encounter Anim2 we would like to pause Anim1 and continue running Anim2.
Once Anim2 is completed we want to resume Anim1 again. We tried disabling Anim1 using disable method but onEnter/onLeave/onEnterBack/onLeaveBack methods still getting called. Please suggest.
Pause Scroll Trigger for some time while scrolling and resume it
in GSAP
Posted
We have create a ScrollTrigger animation (Anim1) using ScrollTrigger Object.
const Anim1 = ScrollTrigger.create({
trigger: "anim1",
onEnter: () => { },
onLeave: () => { },
onEnterBack: () => { }
onLeaveBack: () => { }
})
Anim1 is running continuously while scrolling.
In between the page we are creating another animation (Anim2) on page scroll. Once we encounter Anim2 we would like to pause Anim1 and continue running Anim2.
const Anim2 = ScrollTrigger.create({
trigger: "anim2",
onEnter: () => {
// DIsable Anim1
},
onLeave: () => {
// Enable Anim1
},
onEnterBack: () => {
// DIsable Anim1
}
onLeaveBack: () => {
// Enable Anim1
}
})
Once Anim2 is completed we want to resume Anim1 again. We tried disabling Anim1 using disable method but onEnter/onLeave/onEnterBack/onLeaveBack methods still getting called. Please suggest.