Jump to content
Search Community

Changing child totalDuration without adding delay/overlap to parent

Blueshell 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

Hey. Is there an easy way to change the totalDuration of a child of a parent timeLine in a way that also changes the duration of that parent to fit? Right now, if I lower the child's totalDuration, a delay is added after it on the parent instead of shrinking the parent to fit.

 

I can make a new Timeline every time I change child totalDurations and then add them to it, but I just want to know if there's a cleaner way I'm missing.

 

Note: I'm changing a child's proportion towards the rest of the children, so changing the parent's scale or totalDuration will not work.

Link to comment
Share on other sites

Thanks. :)

 

Ok, this is not my exact code, but it shows what I'm getting at:

http://jsfiddle.net/blueshell/rX8zy/

 

When I click the changeFallDuration button and then fallAndSlide, the "ball" will stop for 1.5 seconds before the slide goes off.

 

My question is then: Is there an easy way to shorten the fall tween's duration (while it is in fallAndSlide), such that the ball won't stop before sliding? Without making a new fallAndSlide timeLine preferably.

 

I have a much larger system I'm working with in reality, where a media file is played along with a long timeLine, and I need to adjust each of its child when I change between media files (because some parts may be longer or shorter than the previous media file). It seems clunky to create a new timeLine each time the media changes. I have to run through quite a bit of code lines to construct it again.

Link to comment
Share on other sites

Its a tricky situation but there is a method that will help. Whether its easier than re-creating the timeline may depend on your exact situation.

 

First, let me just add that although it is very convenient to add tweens in direct succession when building your timeline, once the timeline is built the duration of individual tweens has NO effect on when subsequent tweens start. So as you found out, changing the duration of tweenA does not effect when tweenB starts. Each tween is given a startTime when its inserted into the timeline and for all intents and purposes, that time is locked in place". 

 

As far as moving tweens around, yes, there is a shiftChildren() method which could work well for you as long as you know how much time you need to subtract or add from the tweens' original startTime and the timeline's time at which the shift should start. 

 

shiftChildren () method
public function shiftChildren(amount:Number, adjustLabels:Boolean = false, ignoreBeforeTime:Number = 0):*
Shifts the startTime of the timeline's children by a certain amount and optionally adjusts labels too. This can be useful when you want to prepend children or splice them into a certain spot, moving existing ones back to make room for the new ones.

 

 

Here is a codepen demo showing it in action.

http://codepen.io/GreenSock/pen/gpBtf

 

Read the html description and code comments. Press "run" to run again.

Let me know if you need more help.

  • Like 4
Link to comment
Share on other sites

Ok, thanks. I can maybe use that, but it'll still be more of a hassle than I was hoping for.

 

I may just construct a number of timeLines, one for each case where the proportions of each child may be different. In my case, I'll just need one other timeLine with different proportions. No big deal.

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