Trigger an animation when scrolling past a given position in Framer X

TriggerAnimationOnScroll.tsx

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 },
    }
}