Jump to content


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

Recommended Posts

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

Link to comment
Share on other sites

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.
  • Thanks 1
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.