CODEWITHSUNDEEP
reactjsframer-motion
vuvu
vuvu

Reputation: 5338

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";

Upvotes: 5

Views: 8034

Answers (3)

Dave Lee
Dave Lee

Reputation: 526

For those who are interested in latest version.

import { useScroll } from "framer-motion"

const { scrollY } = useScroll()

useMotionValueEvent(scrollY, "change", (latest) => {
  console.log("Page scroll: ", latest)
})

Upvotes: 5

Jon Rivera
Jon Rivera

Reputation: 21

  const { scrollY } = useViewportScroll();

  scrollY.onChange(y => {
    console.log('y ', y)
  })

just a slight typo :)

Upvotes: 2

manuel pineda
manuel pineda

Reputation: 108

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
    })
}

Upvotes: 5

Related Questions