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.
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.
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.
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.
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.
Use animations on hover situations. Logos can look pretty cool with some css styling.
