Hey everyone! 
I’ve built a custom mobile navbar combining Webflow IX3/GSAP interactions with custom JavaScript for accessibility and mobile menu functionality. The goal is to create a production-ready, reusable component to share with the community.
My Setup:
-
Native Webflow GSAP interactions for open/close animations
-
Custom JS for mobile menu state management and scroll locking
-
ScrollTrigger for page animations
-
Full accessibility support (ARIA, focus trapping, keyboard nav)
Project Structure: The navbar is in the “Testing” page. All custom CSS and JavaScript are embedded directly within the navbar component (in the nav_wrap div) – makes it easy to review everything in one place.
What I’m Looking For:
-
Code review – is there a better way to structure this?
-
Best practices for coordinating IX3 animations, ScrollTrigger, and scroll locking
-
Guidance on timing and state management when combining Webflow IX3 with custom code
One Visible Issue (Possibly Others): Anchor links work on first click but scroll to wrong positions on subsequent clicks. This makes me think there might be deeper timing/coordination issues in my approach.
Has anyone built something similar or have experience with:
-
Managing ScrollTrigger with
position: fixedscroll locking -
Proper timing between IX3 animations and custom JS
-
Best practices for Webflow + GSAP custom implementations
Would love any feedback, code review, or pointers to resources! 
Read-only link: Webflow - Webyst Starter (Gsap Navbar)