A Parallax example would be very nice :-) about motion HOT 5 CLOSED

You may have discovered this already, but there are some more examples in the docs now, including this Parallax one!

from motion.

I've just checked out the example and can't help feel somethings off with it, by the time you get to the 5th of the 8 images all the parallax blocks have scrolled by already. Leaving the last 3 images without any floating magic 😿 .

Or maybe that was intentional in the example?

from motion.

Thanks natemoo! Totally forgot to update here

from motion.

You may have discovered this already, but there are some more examples in the docs now, including this Parallax one!

I believe the parallax image example is broken; are the images supposed to be parallax or just the containers around them?

from motion.

Can anybody help me out with the Parallax example? I'd like to build the re-following the following scroll-behaviour: https://www.johannclausen.com/?filter=Featured.

• Fade-In title after some part of the image is shown
• On scroll, move it down, but stop after moving it 300px

I'm very new to Gatsby (React) and Framer Motion, so any help would be appreciated. I found the .tsx example but couldn't get it to work

import { Override, motionValue, useTransform } from "framer"

const contentOffsetY = motionValue(0)

// Apply this override to your scroll component
export function TrackScroll(): Override {
    return { contentOffsetY: contentOffsetY }
}

// Apply this override to your parallax layer
export function ParallaxLayer(): Override {
    const y = useTransform(contentOffsetY, [0, -100], [0, 50], {
        clamp: false,
    })
    return {
        y: y,
    }
}

and the example mentioned above is very hard for me to understand. The structure of my div is the following:

import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

export default function Article() {
  return (
    <div className="entry">
      <h1>Title</h1>
      <StaticImage src="" />
    </div>
  )
}

In Vanilla JS this would be a bit easier I guess, but learning React/Gatsby, I'd rather work with those resources.

from motion.