Jump to content
Search Community

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

dax006 test
Moderator Tag

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 4
Link to comment
Share on other sites

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
            }
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...