Jump to content
Search Community

Removing Tween in Timeline by Label

tallwhitey test
Moderator Tag

Go to solution Solved by Carl,

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

I've looked in the docs but haven't been able to find a straightforward way. But is it possible to simply remove a tween from a Timeline using it's position label?

 

And a sort of side question, if a Timeline has 3 tweens (each 1 second long), one at the start, 1 sec, and 2 seconds in, and you remove the middle one, does the 3rd tween shift to start at 1 second, or remain at 2?

 

Thanks.

Link to comment
Share on other sites

Hi Tallwhitey,

 

Thanks for the questions. No, there is not a direct way to remove tweens at a label.

However, you could

 

  1. find the label time using TimelineMax.getLabelTime()
  2. use getChildren() to get an Array of all the children
  3. loop through the Array of children and see if their startTime() matches the label time
  4. remove the children at that time

I just updated the post Dipscom linked too regarding timelines collapsing when tweens are removed (thanks, bud!)

  • Like 1
Link to comment
Share on other sites

  • Solution

Figured it would help you and others to just illustrate the method above like:

 

var tl = new TimelineMax();


tl.to(".green", 0.5, {y:100})
  .to(".orange", 0.5, {y:100}, "orange")
  .to(".grey", 0.5, {y:100})
  .to(".box", 0.5, {opacity:0}, "orange");


//remove 2 tweens at orange label
removeAtLabel(tl, "orange");


function removeAtLabel(timeline, label) {
  var labelTime = timeline.getLabelTime(label);
  var children = timeline.getChildren(false, true, true, labelTime); //nested, tweens, timelines, ignoreBeforeTime
  for (var i = 0; i < children.length; i++){
    if(children[i].startTime() == labelTime) {
      console.log("found a tween to remove at " + label + " label");
      timeline.remove(children[i]);
    }
  }
}

http://codepen.io/GreenSock/pen/vKWxdN?editors=0011

 

I haven't battle-tested it, but please feel free to use it and let us know if you run into any problems.

  • Like 2
Link to comment
Share on other sites

Thanks for the thorough response. The only issue is that I was looking for a way to only remove tweens with an explicit label, and not other tweens that happen to land at the same time (which happens when I changed the gray box to start .5 early).

 

Hopefully I'll have time to look more into it later this evening.

Thanks!

Link to comment
Share on other sites

In that case, storing a reference to your tween is the best way. Keep in mind tweens don't have labels, labels just mark a point in time in the timeline.

 

In the future we may add support for giving a tweens a name or id property like:

tl.to(element, 1, {x:200, y:100, name:"myTween"});

which then would allow for a method like TweenLite.getTween("myTween") to find that tween for you. 

  • Like 3
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...