Reusing nested timeline

[symbolebranding 1 Likes (Newbie)]

I created a master timeline so my 6 timelines animate one after the other when the page is loaded.

 

I would like each separate timeline to animate separately on mouse enter. I can manage to do either one of the above but not both.

 

I've got to achieve this using setTimeout function to animate on load. But I would prefer staying with GSAP for this.

 

How can I achieve this.

 

Please note that I am very new at this!

See the Pen WogmbW by symbolebranding (@symbolebranding) on CodePen

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

Thanks so much for the clear demo.

 

Here is a solution that requires little work or modification to your code but it may not be the most beginner friendly.

 

Instead of nesting your timelines in a parent timeline you can use a timeline to tell each timeline to play every 0.2 seconds like:

 

//call the play function of each timeline
//pass in no parameters: [] = empty array
//pass in name of timeline as scope (refers to what this is inside of play function) 
//use position parameter to space function calls at 0.2-second intervals
tlIntro
.call(tlItem1.play, [], tlItem1)
.call(tlItem2.play, [], tlItem2, 0.2)
.call(tlItem3.play, [], tlItem3, 0.4)
.call(tlItem4.play, [], tlItem4, 0.6)
.call(tlItem5.play, [], tlItem5, 0.8)
.call(tlItem6.play, [], tlItem6, 1)
;

http://codepen.io/GreenSock/pen/bBxJqe?editors=0010

 

Scope can be a weird topic for beginners to wrap their head around so don't get too hung up on it. 

[symbolebranding 1 Likes (Newbie)]

Thanks so much!