How do I kill tweens past a certain point in time?

[dax006 3 Likes (Newbie)]

How do I kill tweens past a certain point in time?

 

So, I have a timeline with a bunch of tweens all starting at random times.  I want to remove tweens of certain elements that either start past a certain point in time, say, 5 seconds, or tween beyond that point in time.   I know about killTweensOf(), but now how do I killTweensPastTime()?

 

I searched google and these forums but couldn't find anything.  

Thanks,

John

[Diaco 1,968 Likes (Superhero)]

Hi dax006 

 

if i understand correctly , you can use this little function :

function RemoveTweensBefore( timeline , myObject , time ){
    var Tweens = timeline.getTweensOf( myObject );
        for (var i = 0 , Tween ; i < Tweens.length; i++) {
          Tween = Tweens[i] ;
          if( Tween.startTime() < time && Tween.endTime() < time ){
          timeline.remove( Tween );
        }
    };
};

// and then

document.getElementById('remove').addEventListener('click',function(){
    //tl.pause(0);
    RemoveTweensBefore( tl , Red , 1 )
    tl.restart();
});

pls check this out : 

See the Pen xVwWmY by MAW (@MAW) on CodePen

[dax006 3 Likes (Newbie)]

Thank you!  I had a brain fart and just couldn't figure it out, and here you solved it in a few minutes.

 

I do now have a new issue in that tweens that bridge the time gap, so to speak, are ending too early.  I need a way to change the ending location of that tween to be the current location... I can adjust the duration easily enough with .duration(), but x and y seem more difficult.  Any ideas?

 

Edit: Figured it out.  Just had to make a new tween.  Like so: (updateTo() does not work)

            if (tween.startTime() > tl.time()){  //if the tween starts beyond the current point, kill it
                tween.kill();//removes it forever
            }else if (tween.endTime() > tl.time()){  
            //if the tween ended beyond this point, that means it is currently ongoing. 
            //create a new tween that ends at the current location.. this means rewinding the tween to calculate its start 
                var savedtime = tl.time();
                var savedcoord = getelementlocalcoord(this);
                var starttime = tween.startTime();
                tl.seek(starttime); //jump
                var startcoord = getelementlocalcoord(this);
                tl.seek(savedtime);//restore location
                tween.kill();//remove old one
                var fromarray = {"x":startcoord.x,"y":startcoord.y};
                var toarray = {"x":savedcoord.x,"y":savedcoord.y};
                console.log(fromarray);
                var dur = savedtime-starttime;
                tl.fromTo(this,dur,fromarray,toarray,starttime);  //create new tween
            }

[Carl 9,704 Likes (Superhero)]

Great job, Diaco!

 

in case you ever want to kill any tween in a timeline past or before a certain time you can use getChildren() http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/getChildren/ which will give you an array of tweens and you can loop through them similar to how Diaco showed and do stuff based on their startTime()