Hide nav-bar on scroll

Hiding the nav-bar when scrolling up is a common UX pattern . Unfortunately it isn't possible to hide the nav-bar when scrolling back up all natively in Framer, Luckily for you, I've got you covered.

Copy Remix link

Preview

Create a nav-bar

In this case we are adding some code to the nav-bar so first of all, we need to add a nav-bar to our canvas. In this case I'm just using a standard Framer component. Once you've added this just select it and scroll down to Code Overrides > File > New file

Entering the code

There you are, a code editor. Don't get scared now, it's not that hard. Just select all content and delete this. Then paste the code you'd like to use (see code example below) and hit CMD + S to save the code. Done all that? Just go back to your canvas.

Attaching the override

Almost there! All you need to do is select the nav-bar once again from the layer list and scroll down to code overrides. Now select the filename you've just created and select the Function you've just created in the Override dropdown to attach the override to the component.

import { Override, useAnimation } from "framer" import { useEffect, useState } from "react" export function hideOnScroll(): Override { const [isScrollingUp, setIsScrollingUp] = useState(false) const [lastScrollPosition, setLastScrollPosition] = useState(0) const controls = useAnimation() useEffect(() => { const handleScroll = () => { const currentScrollPosition = window.scrollY if (currentScrollPosition === 0) { setIsScrollingUp(false) } else if (currentScrollPosition < lastScrollPosition) { setIsScrollingUp(true) } else { setIsScrollingUp(false) } setLastScrollPosition(currentScrollPosition) } window.addEventListener("scroll", handleScroll) return () => { window.removeEventListener("scroll", handleScroll) } }, [lastScrollPosition]) useEffect(() => { controls.start({ y: isScrollingUp ? -120 : 0, transition: { type: "spring", stiffness: 500, damping: 30, }, }) }, [controls, isScrollingUp]) return { animate: controls, } }

Table of contents

Final result

Create a nav-bar

Entering the code

Attaching the override

Sorry

This is only available on Desktop.