make framer motion fade in & out based on scroll position

[jdion84]

im just trying to get some text to fade in and out based on the scroll position

i am using framer motion

here is my code:

    const ref = useRef(null)
    const { scrollYProgress } = useScroll({
        target: ref,
        offset: ["start end", "end end"],
    })
    const opacity = useTransform(
        scrollYProgress,
        [0, 0.5, 1],
        [0, 1, 0],
    )

// ...

        <div ref={ref} className="flex flex-col items-center justify-center border border-blue-600 text-7xl h-screen">
            <motion.div
                style={{
                    opacity: opacity,
                }}
            >
                hello
            </motion.div>
        </div>

i want it so when the scroll position is centered on the div (scrollYProgress == 0.5) then the opacity is 100%, and scrolling up or down from that point fades it out progressively based on scrollYProgress

the text is only fading out when scrolling top to bottom, not fading in & out as desired

[Nlferu]

Hello @jdion84

Try playing with offset.

Here is an example:

    const reference = useRef<HTMLDivElement>(null)
    const { scrollYProgress } = useScroll({ target: reference, offset: ["1 0", "1.5 1"] })

         <section className="" ref={ref} id="home">
            <motion.div
                ref={reference}
                style={{
                    opacity: opacityProgess,
                }}
            >
                CONTENT
            </motion.div>
        </section>