Jump to content
Search Community

remove / re-add timelinemax children, want to recalc total duration

hughc test
Moderator Tag

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

Hi, I've created a TimelineMax instance with a series of child TweenMax animations. I need to play the timeline backward and forward to transition between two states. This works great.

 

When executing a reverse()  only, I want some of the child animations to have lower position values, to speed up the animation as a whole. I keep references to the ones I want to target, and then use remove() to strip them from the timeline, before then re-adding them for the reverse(), with revised values.

 

I've scoured the forum for an answer and have read much about how changing child tweens does not affect the overall duration of a timeline (which, when you alter / remove child tweens somewhere in the middle, makes sense) but in this case, the tweens  I want to remove are the last ones in the timeline.

 

Before I re-add them, is there a way to force the timeline to recalculate its duration, so that when they are re-added, they are appended after the last child. As it stands now, there is 'dead space' on the timeline where the tweens were, and so, when re-adding them, there is a long pause before they are played. The pause gets longer with each play() and reverse() (and remove() and add() as the total duration grows and grows.

Link to comment
Share on other sites

See the Pen EGLxBg by hughc (@hughc) on CodePen

 

 

with every play() and reverse(), the timeline duration grows - I want to force the recalc the duration before I add the circle tweens back onto each time, so that they are after the last added element, and remove the "empty" time that currently exists after each remove() is done.

 

 

Link to comment
Share on other sites

Thanks for the suggestions, but I'm no closer to a solution.  

 

The issue I have here is that the timeline's duration continues to reflect the last tween's end, even when that tween has been stripped off the timeline.

 

 There appears to be no means to force the timeline's duration to be recalculated, even when the last n tweens have been stripped off the end of it - it can only grow in length.

 

Doing so would allow the tweens to be readded, without the added pauses that multiple remove() /  add() combinations currently create. 

 

The old Flash Tweenmax (the last Greensock I used, some years ago) behaved as I would expect the JS version to behave:

 

 

Link to comment
Share on other sites

I'm confused. Doesn't @mikel demo do what you're trying to do? Can you explain what your goal is?

 

Timeline animations are not like elements using CSS float left where everything shifts to the left when you remove something from the front.

 

By default, animations are added relatively, but the actual animation's position is absolute. Adding or removing animations will not change the start time.

 

A good tutorial on positioning. 

https://greensock.com/position-parameter

 

 

k6r1Xej.jpg

 

 

 

1 hour ago, hughc said:

The old Flash Tweenmax (the last Greensock I used, some years ago) behaved as I would expect the JS version to behave:

 

That's trimming something off the end. The start time still remains the same.

 

 

1 hour ago, hughc said:

The issue I have here is that the timeline's duration continues to reflect the last tween's end, even when that tween has been stripped off the timeline.

 

 There appears to be no means to force the timeline's duration to be recalculated, even when the last n tweens have been stripped off the end of it - it can only grow in length.

 

 

Have you verified that you're stripping stuff off the end of the timeline like you want? A quick look at your code says otherwise. You're removing and adding a tween one at a time, i.e. you're removing a tween from the front, and sending it all the way to the back.

 

You should probably remove all the tweens before adding them to the timeline.

 

$(".forward").click(function(e) {
    
  tl.remove(cachedTweens);
  
  for (var whichId = 0; whichId < cachedTweens.length; whichId++) {
    var tweener = cachedTweens[whichId];
    //tl.remove(tweener);
    tweener.paused(false);
    tl.add(tweener, "-=0.25");  
  }
  tl.play();
})

 

 

 

  • Like 3
Link to comment
Share on other sites

Thanks @OSUblake for the solution - as you correctly spotted, the issue was with the remove / add happening one item at a  time - the last tween removed was maintaining the timeline length as otherws were added removed before it.


@mikel your dual-timeline solution made sense, but my real (not example) timeline was considerably more complex, so I was trying to avoid set up 2 separate timelines, when I only wanted to adjust the last few tweens on the timeline.

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