Design
Insights
Aug 27, 2025
Implement advanced navigation on scroll in Framer
Here's how to implement a floating navigation that appears automatically when scrolling in Framer. This practical guide uses scroll sections and animations to enhance UX and improve accessibility.
Uploaded by
Translated by
Contents
Table of Contents
This document aims to help local users who are learning Framer and facing difficulties due to the lack of Korean resources. The contents of the official blog were translated into Korean, adding practical information. We hope it assists those using Framer.
Are you looking for a way to make website navigation more intuitive and accessible? Consider a floating navigation that appears when scrolling. In this tutorial, we'll explore step-by-step how to create navigation that appears as soon as the user starts scrolling and stays until the end of the page.
Setting up the project
Prepare your project before starting. Fix the standard navigation at the top of the page, and separately create a floating navigation. Set the floating navigation with a position of fixed, and positioned 20 pixels from the top, left, and right.
Defining the scroll section
To identify when the floating navigation appears, you need to define the scroll section. Add a scroll section to the hero section and name it “hero”. Select the floating navigation, add scroll animation effects, set the trigger to section in view, and specify the hero section. If you set the viewport to top, the animation will run as soon as the hero section touches the top of the viewport.
Customizing the animation
Next, set the animation for the floating navigation. Set the opacity to 1 and scale to 1. Simultaneously, move the navigation out of view by setting the Y value to -110. This way, when previewed, the navigation naturally appears as you scroll down.
Fixing the navigation disappearing issue
Sometimes, a problem occurs where navigation disappears as soon as the hero section is out of view. To fix this, unlock the enter and exit transitions of the scroll animation and remove the exit animation.
Adding offset
Finally, add an offset to trigger the animation slightly earlier. Specify a Y offset of 10 pixels in the hero section so the animation activates 10 pixels before the hero section touches the top of the viewport.
Conclusion
The floating navigation that appears during scrolling in Framer can improve user experience and enhance navigation accessibility simply and effectively. By following this process, anyone can make their website navigation more intuitive.
This article is a translated and adapted version of Framer's official blog content, ‘Advanced scroll-triggered navigation: implementation guide for UX designers’.
