gsap kill()

[Calsa]

1) Can someone provide correct usage of kill() when feeding in multiple ID nodes?

Though I doubt this is correct form, I was trying something like this to stop and clean up animations of a specific target after use..

 

I am just trying to remove all animations from GS applied to all of those ID nodes. 

2) Related, Also on Kill() - what does GS auto cleanup? I would imagine the only tweens that need manually cleaned are things that loop forever using repeat like in #nurkle_anchorOuter_ below?

I would think play once animations would play then auto clean up, but I just want to verify I don't leave a memory mess of unremoved tweens sitting around.  

 

// remove all active  animations for this callout

        var tweenKiller =   "#nurkle_anchor_" + nurkleID + 

                            " #nurkle_anchorOuter_" + nurkleID + 

                            " #nurkle_line_" + nurkleID + 

                            " #urkle_baseLine_" + nurkleID + 

                            " #nurkle_topLine_" + nurkleID + 

                            " #nurkle_bottomLine_" + nurkleID + 

                            " #urkle_titleInnerLineRight_" + nurkleID +

                            " #nurkle_titleInnerLineLeft_" + nurkleID +

                            " #nurkle_titleBackground_" + nurkleID;

        gsap.kill(tweenKiller);
 

 

// Below here is just for reference on how these were created. It's not really super important to the question.  Yes, I know I need to switch to timelines, I just picked up the lib today,  got hung up on nesting timelines for something like this (what to do when most targets don't start at zero, and some loop forever and others dont). As I am just exploring the library, it was not yet a super high priority to revisit yet. 

// title animation in

        // todo Timelines!

        // @ 0sec

        gsap.fromTo("#nurkle_anchor_" + nurkleID,{r: "0"}, {r: "7", duration:0.5, ease:Bounce.easeOut});

        gsap.fromTo("#nurkle_anchorOuter_" + nurkleID,{r: "0"}, {r: "10", duration:0.5, ease:Bounce.easeOut});

        

        // @ 5sec shrink origin, draw anchor and baseline

        gsap.fromTo("#nurkle_line_" + nurkleID, {drawSVG: "0%"}, {drawSVG: "100%", duration:0.5, delay:0.5});

        gsap.fromTo("#nurkle_baseLine_" + nurkleID, {drawSVG: "0%"}, {drawSVG: "100%",  duration:0.5, delay:0.5});

        gsap.fromTo("#nurkle_anchorOuter_" + nurkleID,{drawSVG: "100%"},{drawSVG: "0%", duration:2, delay:0.5, repeat:-1, yoyo:true})

        gsap.to("#nurkle_anchorOuter_" + nurkleID,{rotation: 360, transformOrigin:"center", ease: Power0.easeNone, repeat:-1, duration: 1, delay:0.5});

        

        // @1 seconds start drawing topline

        gsap.fromTo("#nurkle_topLine_" + nurkleID, {drawSVG: "0%"}, {drawSVG: "100%", duration:0.5, delay:1});

 

        // @1.35 seconds start drawing inner shape

        gsap.fromTo("#nurkle_titleInnerLineRight_" + nurkleID, {drawSVG: "0%"}, {drawSVG: "100%", duration:0.5, delay:1.35});

        gsap.fromTo("#nurkle_titleInnerLineLeft_" + nurkleID, {drawSVG: "0%"}, {drawSVG: "100%", duration:0.5, delay:1.35});

        

        

        gsap.fromTo("#nurkle_titleBackground_" + nurkleID, {fillOpacity: "0%"}, {fillOpacity: "100%", duration:0.5, delay:1.85});

        setTimeout(()=>{

            document.getElementById("nurkle_titleBackground_" + nurkleID).setAttribute("fill", "var(--pwt-blue)");

        }, 1850);

 

 

 

 

[GreenSock]

There is no gsap.kill() method. I think you meant to use gsap.killTweensOf(), right? 

 

And you're not passing in a valid selector string because there aren't any commas inbetween the IDs:

// BAD
"#nurkle_anchor_1 #nurkle_anchor_2"

// GOOD
"#nurkle_anchor_1, #nurkle_anchor_2"

You don't have to manually kill() each tween or do anything special to "clean up" animations that finish running. GSAP handles that for you. 

 

Happy tweening!