🥳 Enjoy 3 months of Framer for free!
COMPONENT
All you need to do is copy the code below and add this as a code-override to your nav-bar.
* Note: make sure your nav-bar is set to position: fixed
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, }; }
COMPONENT
All you need to do is copy the code below and add this as a code-override to your nav-bar.
* Note: make sure your nav-bar is set to position: fixed
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, }; }
COMPONENT
All you need to do is copy the code below and add this as a code-override to your nav-bar.
* Note: make sure your nav-bar is set to position: fixed
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, }; }