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.

Supercharge your business site.
  • 99.99% uptime

  • Dedicated IP address

  • Unlimited pages

  • Proxy support

  • Custom onboarding

  • Unlimited viewers

  • Invoicing

  • Custom terms

  • Security reports

  • Single sign-on

  • Canonical URL

  • User roles

  • Office hours

  • Performance audit

  • SEO audit

  • Advanced DDoS protection

  • Custom agreements

Framer UI
Supercharge your business site.
  • 99.99% uptime

  • Dedicated IP address

  • Unlimited pages

  • Proxy support

  • Custom onboarding

  • Unlimited viewers

  • Invoicing

  • Custom terms

  • Security reports

  • Single sign-on

  • Canonical URL

  • User roles

  • Office hours

  • Performance audit

  • SEO audit

  • Advanced DDoS protection

  • Custom agreements

Framer UI
Supercharge your business site.
  • 99.99% uptime

  • Dedicated IP address

  • Unlimited pages

  • Proxy support

  • Custom onboarding

  • Unlimited viewers

  • Invoicing

  • Custom terms

  • Security reports

  • Single sign-on

  • Canonical URL

  • User roles

  • Office hours

  • Performance audit

  • SEO audit

  • Advanced DDoS protection

  • Custom agreements

Framer UI