when clikc nav list active parent wiill be animate, children reverse animate

[Sanjana]

I am trying to design if i click the 'about'  in nav list that about content will be animate, before about content animation, children nav list are reverse animate after parent will be animate .  I made this code but this seems bit long.

How to made this shortest way

See the Pen yLeeydo by sanjuu01 (@sanjuu01) on CodePen

[ZachSaucier]

Hey Sanjana and welcome to the GreenSock forums!

 

This sort of thing likely is more complicated than what you think. Optimally you wouldn't even need a loading screen, you could just fade out the previous page's content and transition in the new content. But if you do need a loading screen, you likely want to use something like Barba.js to help you detect when the new content is loaded. 

 

With that being said, if you don't want to wait for the entire timelines to reverse you can move the playhead to the beginning immediately instead. A good way to do that is to use .pause(0).

See the Pen zYrrGJX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Some side notes:

• You had some pointless .delays that I removed.
• It's best to use the position parameter instead of delay when you're using timelines.
• It's good to use functions to make your code more DRY (don't repeat yourself). I write more about doing that in my article on animating efficiently.
• In GSAP 3 we recommend that you put the duration in the vars parameter so that you can use defaults.
• You don't need yoyo: true on all of your timelines.

[Sanjana]

well explained thank you @ZachSaucier