Problem with nested timelines

[gmw]

Using GSAP, I'm trying to mimic the following animation.

 

http://www.petenottage.co.uk/about/

 

As you can see, there is a endless loop of head animations where a similar but different head animates into view, pauses for about 10 seconds and then animates out. Then the next head animates in and so on and so on. 

 

Using the GSAP Position Parameter, I was able to successfully create a single head animation. I have a 5 second delay between animate in/out. 

 

 

Ok so far so good.

 

So now I want to add a second animation to my sequence. For simplicity's sake, they are identical except that the first animation doesn't have a hat and while the second one does..

 

Looking through the forum, I came up with the idea of creating a separate timeline for each animation then nesting those timelines into a single master timeline. Here is what I came up with:

 

See the Pen xOXoOP by gmw (@gmw) on CodePen

 

It "appears" that the first animation is executing fine (i.e no hat) while the second animation only the hat is visible. The rest of the head has disappeared.

 

Anyone have any ideas what may be wrong? Can the vars not be shared between timeline OR is this the wrong approach? Thanks for any help.

See the Pen YWAyvb by gmw (@gmw) on CodePen

[Jonathan]

Hello gmw, and Welcome to the GreenSock Forum!

 

I am not near my computer, but by looking at your codepen.

 

Would you mind letting us know in detail what line and what tweens your having issue with?

 

The reason being is that you have a lot of tweens in there and it will take a while to see what tweens your writing about.

 

So any additional info will be appreciated!

 

These video's might also help as well:

 

 

And this video about immediateRender since you are using from() tweens:

 

 

Thanks!

[gmw]

Thanks Jonathan for the quick reply.

 

Referring to this codepen:

 

See the Pen xOXoOP by gmw (@gmw) on CodePen

 

It "appears" that all of the tweens on the first timeline (i.e tl1) are working as expected.

 

However on the second timeline (tl2) only the following 2 tweens seem to render anything visually (i.e. the hat).

tl2.from(hat, 1, {css:{scale:0.05, opacity:0, rotation: -270, transformOrigin:"40% 40%"}, ease:Quad.easeInOut }, "-=1")
tl2.to(hat, .5, {css:{scale:0.05, opacity:0, rotation: -270, transformOrigin:"50% 50%"}, ease:Quad.easeInOut }, "-=.5")

While the elapsed time of tl2 seems to be accurate, none of the other tweens (head, mouth, hair, etc) are rendering anything visually.

 

Will check out those vids this afternoon when I get back to my desk. Thanks again.

[PointC]

Hi gmw 

 

I think I understand what you're asking about some elements not appearing when you try to animate them again. The reason for that is the opacity is already at 0 and you're using a from() tween with an opacity of 0. You're animating from 0 to 0 so those elements are invisible. Take a look at this sample code. Assuming we start with a box that has a starting opacity of 1.

tl.from(".box", 1, {opacity:0}) // works fine
tl.to(".box", 1, {opacity:0}) // works fine
tl.from(".box", 1, {opacity:0}) // won't work - this is a 0 to 0 animation because the opacity is already 0 from the previous tween

To solve this you could use a fromTo() tween like this:

tl.fromTo(".box", 1, {opacity:0}, {opacity:1})

Hopefully that helps a bit.

 

Happy tweening.

[gmw]

Thanks PointC! Now it works like a charm!

 

Of course the opacity is 0. *** THE CODE THAT I WROTE *** caused that. Sorry PointC, I wasn't thinking. Coding can keep you humble.  Also I took your advice on using fromTo(). Works great!