Jump to content


Animate hidden elements into view

Moderator Tag
Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi There,


I’m so sorry if this has already been asked. However, I can’t seem to find an answer that’s helped my particular issue. I’m creating an animated circular menu, where tabs/links animate into view upon clicking the Menu button. The individual tabs of the menu are initially hidden and I’d like them to animate into view. I’m currently using autoAlpha: 1 to try and achieve this. However, though this successfully displays the tabs, it doesn’t animate them into view. It simply displays all the tabs at once with no animation. 

The menu itself is an SVG (using Sara Soueidan’s awesome circulus.svg tool). I’ve created a codepen to help explain my issue. The first time clicking the menu will show my problem. A 2nd click will close it (which works fine) and a 3rd click will show how I’d like it to work from the get-go (ie. animating the tabs into view). It’s just the first time opening the menu that doesn’t work as desired.


Any help with this would be so incredibly appreciated. I’ve been totally stumped for a few days on this and have a feeling it’s a very simple fix.



Thanks so much for your time!

See the Pen woyXJa by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi, milhouse :)


I don't what's your desired menu behaviour , but I think this pen can help you : 

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

Link to comment
Share on other sites

Hi Diaco, 
Thank you so much for your quick reply and the pen. I tried both methods and unfortunately neither are producing the desired behaviour. I played around with both to try and make either work and your 2nd method is closer to my desired behaviour, but it unfortunately still has the same issue as my original pen. 
Basically I’d like to start with the menu being closed, then upon first click, I’d like each tab (i.e. ‘.item’) to fan open. An example of the exact behaviour I’d like, can be seen by opening and closing the menu once, then when opening it again (this will be the 3rd time clicking the menu button) each tab will fan open. That’s exactly what I’d like to do from the start. However, currently at the start (ie. on first click of opening the menu), all tabs appear at once, rather than fanning open.

I’ve attached a gif to help illustrate my desired outcome. The gif shows the animation a lot slower than it really is, but helps illustrate the behaviour I’m after on the initial click of opening the menu.
Thanks again. I genuinely appreciate your time and suggestions.


Link to comment
Share on other sites

  • Solution

method #2 is what you're looking for , you just need to add a .set() at the beginning . pls check the pen again :)

Link to comment
Share on other sites

Ahh! Thank you so much! .set() does the trick!  :D

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.