Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
allanbreyes

How can I update a parent timeline when child tweens/timelines durations are updated?

Recommended Posts

Problem

I'm noticing some very strange behavior when I'm updating a timeline's children tween durations. This is problematic for instances where I need to set the duration of the tween after initialization. e.g. an audio clip needs to download before knowing what the desired duration is.

 

Observations

The codepen demonstrates this. I construct 10 tweens at 0.2 duration each to a timeline (2s total). When I update each of the tweens' durations to 0.4, several unexpected things are observed:

1. Parent timeline only goes to 2.2

2. The tweens become "choppy" with overlap.

 

It appears that only the last tween expands the timeline, but an interval of 0.2 is still placed between each tween. How can I correct this after updating the duration?

 

Thanks!

See the Pen mxzVrj by allanbreyes (@allanbreyes) on CodePen

Link to comment
Share on other sites

Now I know for a fact someone else will know a SIGNIFICANTLY better way to do this (because there is always GSAP magic dust) ... but the first thing I can think of is clearing the timeline of tweens, adjusting each tween's duration, and then adding that tween back into the timeline.

 

document.getElementById('point-four').addEventListener('click', function() {
  tl.clear(); // empty the timline
  tweens.forEach( function(tween) {
    tween.duration(0.4);
    tl.add( tween ); // add tween back to timeline
  });
  updateStats();
});

 

See the Pen aYRpLb by sgorneau (@sgorneau) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Thanks @Shaun Gorneau! Pending a better solution, I'll give this a shot. I'd rather not clear the timeline since there's a mix of other tweens... maybe I can try swapping it out afterwards.

Link to comment
Share on other sites

I was just trying that! It appears to suffer from the same effect (start times do not change, and the parent timeline does not expand/contract).  I was hopeful for TweenMax.updateTo, but it appears that can only update `vars` and not duration... Thanks for the suggestion, though!

Link to comment
Share on other sites

Maybe I'm just answering the wrong part of the question ... even though the stats output will not reflect the change in values, the timeline's tween timing will certainly adjust to the "perceived" time.

 

EDIT: I modified updateStats() to take into account timeScale()

 

See the Pen BrqpMV by sgorneau (@sgorneau) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Ah I see! I was changing each individual tween's time scales. For my particular application, each of these tweens have different durations, so unfortunately, I can't scale the whole thing...

 

See the Pen XExMgN by allanbreyes (@allanbreyes) on CodePen

 

Link to comment
Share on other sites

Ah, I didn't search hard enough... looks like there is some prior art on this:

 

 

Quote

For performance reasons, every tween in a timeline has its starting and ending values recorded internally after the first time they render.

 

Quote
If you allow the user to monkey with the end value of tween1 by dragging the red thing to end at an x value of 400 in the GUI then tween2 is not going to automatically update its start value to be 400 the next time the animation plays. You would have to manage that tween as well or invalidate() the timeline. See the dilemma?

 

I think you may ultimately find the easiest route to manage is what you already tried: destroy and create the main timeline every time you need to run an animation showing a recent change. Keep in mind that tween creation is relatively cheap. You can create 1000 tweens in just a few milliseconds.

 

Similar question:

 

Link to comment
Share on other sites

You could also not create a timeline, just have each individual tween start the next one on complete.

  • Like 1
Link to comment
Share on other sites

Sounds like you've worked out some good options, but I wanted to chime in with a few additional thoughts/clarifications...

 

This is all expected (and appropriate) behavior. Changing the duration doesn't alter each tween's startTime too (which was what you were expecting). If you arrange 10 tweens in a timeline that all start 0.2 seconds apart and they're also 0.2 seconds in duration, of course they'll play back-to-back. But if you only update the duration of each, all you're doing is stretching each one out longer, so now they overlap (the start time of each on the timeline didn't change). 

|--|
   |--|
      |--|
  
//compared to...
|----|
   |----|
      |----|

 

A relatively simple solution would be to update the startTime() when you update the duration() as well, like:

 

tweens.forEach(function(tween, i) {
    tween.duration(0.4).startTime(i * 0.4);
});

 

Here's a fork: 

See the Pen 3ff37265c608446a35c784528656db7f by GreenSock (@GreenSock) on CodePen

 

Also, that codepen was using a very old version of GSAP - I'd definitely recommend updating to 1.20.4. 

 

Let us know if you need anything else at all. 

  • Like 4
  • Thanks 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.
×