Parallax Image Grid

January 10th, 2024

I used framer motion library to track the ScrollYProgress of the wrapper. I mapped this value on the x-Position of my image wrapper to create the horizontal scroll. To create the parallax effect, i also mapped the Y-Scrollposition on the x-Positon of each image.

 const [value, setValue] = React.useState(0)
    const ref = React.useRef<HTMLDivElement>(null)
    const { scrollYProgress } = useScroll({
        target: ref,
    })

    React.useEffect(() => {
        console.log(scrollYProgress.current)
        setValue(scrollYProgress.current)
    }, [scrollYProgress.current])

    const xValue = useTransform(scrollYProgress, [0, 1], [100, -2300])
    const parallax = useTransform(scrollYProgress, [0, 1], [-200, 400])

Next Interaction

Tabs Gallery

back