The Scrollspy Navigation component delivers precise section tracking, fluid indicator animations, and complete styling freedom for Framer single-page and multi-page layouts.
Smart Scrollspy: Powered by IntersectionObserver for zero-lag section detection. Smooth-scrolls on click and works seamlessly with libraries like Lenis.
Cross-Site Routing: Automatically handles internal pages, scroll anchors, and external URLs. Leverages Framer's native routing for flash-free page transitions.
Animated Indicator: Features a customizable active indicator with smooth sliding and scaling. Full control over background, active text color, and scaling behavior.
Conditional Visibility: Define explicit Start and End sections to automatically show or hide the navigation (e.g., hide in hero or footer).
Independent Offsets: Separate trigger offsets for active section detection vs. component visibility for precise scroll control.
Flexible Item Layout: Unlimited items. Display as text + icon, icon-only, or text-only. Position icons top, bottom, left, or right.
Automatic SVG Recoloring: Automatically syncs single-color SVG icons with your active and default text colors. Togglable for multi-color assets.
Advanced Styling: Full typography control, container layout settings (padding, border radius, native drop shadows), and flexible 100% width/height frame fitting.
Due to the digital nature of this product, all sales are final. Please review the full Refund & Cancellation Policy before purchasing. You can find it [here].
The Scrollspy Navigation component delivers precise section tracking, fluid indicator animations, and complete styling freedom for Framer single-page and multi-page layouts.
Smart Scrollspy: Powered by IntersectionObserver for zero-lag section detection. Smooth-scrolls on click and works seamlessly with libraries like Lenis.
Cross-Site Routing: Automatically handles internal pages, scroll anchors, and external URLs. Leverages Framer's native routing for flash-free page transitions.
Animated Indicator: Features a customizable active indicator with smooth sliding and scaling. Full control over background, active text color, and scaling behavior.
Conditional Visibility: Define explicit Start and End sections to automatically show or hide the navigation (e.g., hide in hero or footer).
Independent Offsets: Separate trigger offsets for active section detection vs. component visibility for precise scroll control.
Flexible Item Layout: Unlimited items. Display as text + icon, icon-only, or text-only. Position icons top, bottom, left, or right.
Automatic SVG Recoloring: Automatically syncs single-color SVG icons with your active and default text colors. Togglable for multi-color assets.
Advanced Styling: Full typography control, container layout settings (padding, border radius, native drop shadows), and flexible 100% width/height frame fitting.
Due to the digital nature of this product, all sales are final. Please review the full Refund & Cancellation Policy before purchasing. You can find it [here].
Lennart Ahlfeldt
