How to add a scroll scrub effect
Scroll tracking uses the scroll position to advance an animation, so you get a scrubbing effect (much like a DJ scratching records).
⚠️ Scroll tracking currently is only supported as an advanced code feature so we only recommend it to people who have a JavaScript or React background. We are looking to add this as an interface based feature in the future.
If you are okay with writing some code for this you'll need a two things: overrides and Framer Motions useViewportScroll and useTransform. In your override you'll need two key things:
const { scrollY } = useViewportScroll()
This gets the scroll y position that you can plug in.
const scale = useTransform(scrollY, scrollRange, [0, 1])
This converts the scroll y to a number between 0 and 1 so you can use it to scale.
You can see the entire effect on this site for some different elements and you can see and edit the full code here.