Does a .fromTo animation "kill" itself upon completion?

[Web Bae]

mButton.addEventListener("click", (e: Event) => {

        let xDist = (e as PointerEvent).clientX - mButton.getBoundingClientRect().x
        let yDist = (e as PointerEvent).clientY - mButton.getBoundingClientRect().y

        gsap.set(circle, { left: xDist, top: yDist })
        gsap.fromTo(circle, { scale: 0, opacity: 1 }, { scale: 1, opacity: 0, duration: .5, ease: "ease.out" })
        console.log(gsap.globalTimeline.getChildren())
    })

 

I have a button that trigger as .fromTo on click. Animation is working great, gsap.globalTimeline.getChildren() only return the active animation(s) from console log statement.

 

My question: does the tween kill itself upon completion? Just wondering what the best practice is here? If it doesn't kill itself is it wise to call .kill() onComplete? Or maybe store the tween in a variable and check it if already exists? If it doesn't kill itself, is there a way to check how many tweens are still "alive"? OK that was 3 questions sorry about that one!

 

Thanks!

Keegan

[GreenSock]

The global timeline has autoRemoveChildren set to true, thus whenever a child completes, it gets removed and made eligible for garbage collection, but if you keep your own reference around, obviously you can do whatever you want with that, like restart(), reverse(), whatever and it'll automatically get pushed back into the global timeline while playing. You do NOT need to worry about killing each tween you create. It's all automatic. Does that answer your question? 

[Web Bae]

Thank you! 🫡