How to add a scroll scrub effect

⚠️ 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.