Calendar with 12 different timelines/steps. Not sure which way is correct.

[dbj]

Hello, I've been trying to make this calendar pen that has a different timeline for each month, and the user can click through the months and see the different animations.

 

At first I tried creating a separate timeline for each month, and calling it from the master timeline, but then I was having problems with tweening between two timelines and being able to reverse.

 

So I found out that I should rather be using one timeline with 12 markers, and using tweenFromTo to switch between them.

 

As you can see from my demo I'm not there yet... but I might be pretty close. I know it has to do with me being terrible at "clever" JavaScript but I'm a designer-trying-to-code kinda guy, so be gentle!

 

Am I close with my code, or is there a much better way that I'm not figuring out?

 

Thanks,

David

See the Pen right by dbj (@dbj) on CodePen

[Diaco]

Hi dbj 

 

you can simply use .addPause() instead of  switch statement and tweenFromTo :

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/pause/

 

you can see same usage here : 

See the Pen yYradO by MAW (@MAW) on CodePen

[dbj]

Thanks Diaco, that will get me going!