Problem with kill aniamtion

[dawid660]

Hi,

I want to kill animation when I scroll beyond image.

I have to kill aniamtion in  "//this"

observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.intersectionRatio > 0) {
            arrowsAnimation()
        } else {
          //this
            gsap.set([dots_DEV, dev_CODE, test_CODE, preprod_CODE, prod_CODE,], { opacity: 0 })
            gsap.set(arrow1_CODE, { x: 0 })
            gsap.set(arrow2_CODE, { y: -90 })
            gsap.set(arrow3_CODE, { x: -100, y: 100 })
        }
    });
});

I try to use arrowsAnimation.kill() but it doesn't work

See the Pen poyQXJB by dawid660 (@dawid660) on CodePen

[ZachSaucier]

Hey dawid660. 

 

A few notes: 

• In general it's best to create animations at the start and use control methods inside of your functions for interaction. I talk more extensively about that in my article about animating efficiently which I highly recommend.
• Part of what makes killing off the old animation more difficult is that you don't save the reference to any of the tweens that you're creating inside of the arrowsAnimation function. One way you could do so is to create a timeline within that function and add all of your tweens to that timeline. Then return the timeline from the function and save a reference to that timeline. That way you could use the variable (that points to the timeline) to kill off the animation.
• Alternatively if you are setting all of the properties that you're animating in the intersection observer callback you could use overwrite: 'auto' or overwrite: true to kill off any tweens that are in conflict.
• Using GSAP's ScrollTrigger would likely make this sort of thing more easy.
• You don't need the quotes around numerical values. That's one of the most common GSAP mistakes.