Jump to content
Search Community

nested timelines

beamish 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 have a problem with nested timelines which is demonstrated in the attached pen:

 

  1. In the codepen: click on the 1st button.  It plays a child timeline nested in a parent timeline.  My first problem is: why do I need line 5: 'child.play(0);'? if I comment it out then the 1st button won't work.  Doesn't the parent time head control the child heads?
  2. Now click on the 2nd button.  The child is removed from the parent and played by itself. This is OK.
  3. Now click on the 3rd button, which should play only the child (which has been removed from the parent after step #2).  Why doesn't the child play?... Now if you click on the 2nd button again the child DOES play... why?
  4. and if you now click on the 1st button which plays only the parent - the child is playing - even though it has been removed from the parent... as if the 'remove' from the parent has not been effective.

What is my wrong way of thinking here?...

 

Thanks, 

 

Elior

See the Pen doWZwg by anon (@anon) on CodePen

Link to comment
Share on other sites

Thanks for the demo. Very helpful.

 

  1. In the codepen: click on the 1st button.  It plays a child timeline nested in a parent timeline.  My first problem is: why do I need line 5: 'child.play(0);'? if I comment it out then the 1st button won't work.  Doesn't the parent time head control the child heads?

The parent timeline respects the paused state of its children when the parent is playing. This is by design and working correctly. 

Imagine you were playing a parent and then did child.pause(), You would expect the child to then be paused, correct? So in your case you are starting the child in a paused state and the engine says, "ok, this guy doesn't want child to play". Make sense?

 

However, you can create child NOT paused and add it to parent which is paused, and child will only play when parent plays. 

var parent = new TimelineMax({ paused: true});
var child = new TimelineMax();

When you pause a parent all of its children will not advance.

 

I investigated your demo and it seems that the remove behavior that you are illustrating appears a bit strange. We will have to dig into this deeper.

Please give us a little time. We will get back to you after doing some more tests.

 

 

  • Like 1
Link to comment
Share on other sites

Thanks for your patience. Yes, this had to do with the fact that we maintain a hidden link to the last timeline that the tween/timeline was associated with so that we can re-activate it properly if/when necessary. It's primarily a garbage-collection, memory-management tool. No animation can run apart from a timeline (the default is the root timeline). I totally see why the behavior would seem odd in your example. I think the best solution is to make it change the associated timeline to the root when you remove() it from a TimelineLite/Max. I have made that change in the upcoming release. If you'd like to try it, just let me know. There's an uncompressed beta of TweenMax at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js if you'd like to kick the tires. 

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

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