3

I am animating in my Navbar with GSAP when the page loads. The navbar is being animated in by changing the height from 0 to 100%.

The height in css is always set to 0 and it worries me if the javascript were to mess up for the user, the animation won't happen and the nav wont show.

3
  • It is my personal belief that navigation should be as simple as possible for search engines and people. Otherwise, you do run a risk. JS can go wrong very quickly. Cheers!! – closetnoc Oct 30 '16 at 5:28
  • 1
    I'm voting to close this question as off-topic because it's not about web mastering but about user interface and experience and we have a stackexchange for that: ux.stackexchange.com – Rob Oct 30 '16 at 15:55
  • oh ok, sorry about that. I am satisfied with the answers anyway. Thanks – enddev Oct 30 '16 at 19:50
1

The height in css is always set to 0 and it worries me if the javascript were to mess up for the user, the animation won't happen and the nav wont show.

That is always a risk.

What you could do, and which a lot of JS frameworks do, is to include a nojs class on the body element in the HTML. The first thing the JS does is to remove the nojs class from the body.

The height of the navbar when a descendent of the nojs class is 100%, but 0 otherwise.

2

To answer your question, one must know the content and the purpose of your website. A navigation bar is there to guide but the design of yours seems to be more distracting than guiding.

As a general rule of thumb, keep it simple, clear and easily accessible (sticky navigation bars) to avoid scrolling. Guide but don't distract.

The design of your navigation bar will contribute to make or break your website. That is why it worths to invest time in designing it.

0
2

closetnoc and billal make very good points.

If I made add, while I do like some sort of animation on sites, I think it is best to keep things animated under these 2 conditions with the second being what I would use in a case where it is a logo.

  1. Animations should be used to catch a user's attention, basically a call to action. I do not think personally think getting a user to click a link pointing to most likely your home page is a good idea.

  2. Use animations on hover situations. Logos can look pretty cool with some css styling.

Not the answer you're looking for? Browse other questions tagged or ask your own question.