Nav-progress is a sticky progress navigation component designed for Webflow that enhances user experience by highlighting the active step with a moving indicator. It features smooth scrolling to sections, optional snapping between sections, and a hover text effect. Built with GSAP and ScrollTrigger, it provides a dynamic way to navigate through content.

Key Features:

• Sticky progress navigation that highlights the active step with a moving pill.
• Smooth scrolling to sections, compatible with Lenis for enhanced performance.
• Optional snap feature between sections for a more guided navigation experience.
• Hover effect that reveals a 'roll-up' text for better visibility of active steps.
• Active label can fill with color as the user progresses through sections.

Design Elements:

• Utilizes a modern layout with a clear visual hierarchy for navigation buttons.
• Incorporates a dynamic moving indicator that transitions smoothly between steps.
• Hover effects create an engaging interaction, enhancing user engagement.
• The use of GSAP for animations provides a polished and fluid user experience.

Potential Use Cases:

• Web applications that require a step-by-step navigation process, such as onboarding flows.
• Landing pages that guide users through different sections of content.
• Educational platforms that present information in a structured manner.
• Portfolio websites that showcase projects in a sequential format.
• E-commerce sites that guide users through product categories or checkout processes.

Conclusion: The Nav-progress component is a functional and visually engaging tool for enhancing navigation in Webflow projects, making it suitable for various applications across different industries.