Animate hidden elements into view

[milhouse]

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

[Diaco]

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

[milhouse]

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.

[Diaco]

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

[milhouse]

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