Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
symbolebranding

Reusing nested timeline

Recommended Posts

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

Link to comment
Share on other sites

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. 

  • Like 4
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.
×