Skip to content

Instantly share code, notes, and snippets.

@perrysmotors
Last active October 9, 2022 08:34
Show Gist options
  • Save perrysmotors/aa5d5bb7031a69ad17ef7a4ef29554ce to your computer and use it in GitHub Desktop.
Save perrysmotors/aa5d5bb7031a69ad17ef7a4ef29554ce to your computer and use it in GitHub Desktop.
Add Parallax to scroll content in Framer X
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,
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment