Skip to content

Instantly share code, notes, and snippets.

@perrysmotors
Last active October 9, 2022 08:34
Show Gist options
  • Save perrysmotors/0692189012267456bda955e54c8d7704 to your computer and use it in GitHub Desktop.
Save perrysmotors/0692189012267456bda955e54c8d7704 to your computer and use it in GitHub Desktop.
Trigger an animation when scrolling past a given position in Framer X
import { Override, Data, motionValue, useTransform } from "framer"
// Keep track of the state of our application
const data = Data({ isPastLimit: false })
// Create a MotionValue to track contentOffsetY
const contentOffsetY = motionValue(0)
// Listen for changes to contentOffsetY
contentOffsetY.onChange(offset => (data.isPastLimit = offset < -52))
// Apply this override to your scroll component
export function TrackScroll(): Override {
return { contentOffsetY: contentOffsetY }
}
// Apply this override to a frame containing your title
export function ShowTitleIfPastLimit(): Override {
return {
opacity: 0, // set it to zero initially
animate: data.isPastLimit ? { opacity: 1 } : { opacity: 0 },
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment