Search code examples
reactjsframer-motion

How to detect certain scroll position with framer-motion?

When scrollTop is equal to 500px, I want to trigger an animation on a div with position fixed. Is there a way to do this in framer-motion. I only find solution that propose when element is in viewport. But my div is always in the viewport, because it has a fixed position. I need a build in scroll position watcher.

sandbox

import { useInView } from "react-intersection-observer";
import { motion, useAnimation } from "framer-motion";
Solution

  • this is kind of old already but here is the answer.

    import { useViewportScroll } from "framer-motion";

const Nav = () => {
    const { scrollY } = useViewportScroll();
    
    scrolly.onChange(y => {
    // y = scroll position
    //Do Something
    })
}