BETA
Get notified 🔥
Updates right into your inbox when a new tutorial drops.
Get notified
Hide nav-bar on scroll
May 4, 2023
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.
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