Seeking Feedback: Fully Accessible Custom Navbar with GSAP Animations

Community resources Webflow Tips
1

Hey Webflow Community! :waving_hand:

I’ve been working on a fully accessible navbar component that combines custom JavaScript with Webflow’s native GSAP animations, built on top of adjusted Finsweet’s Client-First system. The goal was to create something that’s:

:white_check_mark: Fully accessible (ARIA attributes, keyboard navigation, screen reader friendly)
:white_check_mark: Smooth animations on both desktop and mobile
:white_check_mark: Easy to customize using Webflow component attributes and GSAP interactions
:white_check_mark: Reusable across projects

What it includes:

  • Desktop: Hover interactions with intent detection (prevents accidental closes)

  • Mobile: Click-to-toggle (Menu + Dropdown)

  • Custom GSAP animations triggered via custom events

  • Dynamic timing controls via attributes

  • Proper focus management and scroll locking on mobile

  • Handles rapid hover switching without breaking animations

Current Status:
It’s working well in my testing, but I’m not a professional JS developer – I sort of “vibe-coded” this.

What I’m looking for:

  • Code review for best practices, potential bugs, or performance issues

  • Suggestions for improvements or edge cases I might have missed

  • Any accessibility concerns I should address before sharing widely

Read-only link:

Cloeable:

The custom code is embedded in the navbar section. Feel free to clone it, break it, test it – any feedback would be hugely appreciated!

Thanks in advance! :folded_hands:

1 Like
2

Hi @david_webyst

I cant open your read-only link and in your clonable I cannot find a navigation. Can you recheck the links you posted?

1 Like
3

Hey Martin,

sorry I coppied the wrong one, here it is:

You can find the Navigation inside Testing page.

1 Like
4

Hey @david_webyst,
Thanks for sharing this resource. I tested for in page anchors, like page sections, and it doesn’t work on mobile devices, and if you can make that to work, it could be nice if the mobile menu closes on its own when using in page anchor links.

1 Like
5

Hey Pablo,

thank you for testing! I have updated the script and the issue should be resolved.

What do you think about this setup?

1 Like
6

Hey @david_webyst, so it works now for page sections anchor links, and I think it is nice how it closes the menu once you click on the link, but, and this is a problem I had before with GSAP flip, as soon as you start scrolling the page goes back to the top, either scrolling down or up. Take a look at this loom Webflow - webyst-starter-2 - 16 October 2025 | Loom

1 Like
7

Hey Pablo,

I’ve fixed that too. Please try now. What do you think about it now?

1 Like
8

Hello @david_webyst, it is still not working, try it yourself, if you add more sections with an id, and then select a nav-link to go to that page section it will scroll there but as soon as you scroll up or down it will just jump back to the top of the page.

1 Like
9

Hey Pablo,

I’ve tried everything, but can’t resolve the issue myself. I have created a new topic, seeking for help from other Webflow folks.

1 Like
10

That looks like designer bug with the preview and js enabled. It doesn’t jump back to top when published.

11

also just noticed when there is a link scrolled (hash in url) one dropdow closes right after open animation. Probably some conflicts menu states…