Nested timelines with different align properties

[Ahmed Nuaman 0 Likes (Newbie)]

So what I'm trying to achieve is fading in and scaling the first cat at the same time. The reason I can't just do:

timeline.to(cats[1], 1, {
  opacity: 1,
  scale: 2
});

Is because I want to have independent nested timeline groups. Any ideas?

See the Pen JdgLJR by ahmednuaman (@ahmednuaman) on CodePen

[Diaco 1,999 Likes (Superhero)]

Hi Ahmed Nuaman 

 

if i understand correctly , pls try this :

parentTimeline.add(childTimeline1,0);

and pls check out this blog post about Position Parameter : http://greensock.com/position-parameter

[Carl 11,325 Likes (Superhero)]

Yes, Diaco is exactly right. Using the position parameter with add() you can place your nested timelines wherever you want.

 

The align special property of a TimelineLite/Max ONLY applies to tweens that are passed into the timeline's constructor's tweens special property like so

 

var red = TweenLite.to("#redBox", 1, {x:550}),
    blue = TweenLite.to("#blueBox", 1, {x:550}),
    tl;


tl = new TimelineLite({
  tweens:[red, blue],
  align:"sequence" 
});

http://greensock.com/forums/topic/12297-nested-timelines-with-different-align-properties/

[Ahmed Nuaman 0 Likes (Newbie)]

Derp, I should've read the docs!

[Ahmed Nuaman 0 Likes (Newbie)]

Ok, sorry to be a further pain. So the position parameter sort of helped, let me just explain what I'm trying to do (I've also updated the codepen to illustrate the problem):

 

I have the main timeline `parentTimeline` and I want the child timelines (in this case `childTimeline1`) to run in parallel once they've been activated by the parent timeline, so:

parentTimeline: 0-----1-----2-----N-----...
childTimeline1:      \0-----1-----2-----N-----....

So essentially the child timelines have a duration of 0 and are only triggered by the parent timeline, but the parent timeline doesn't wait for them. I hope that makes sense.