search

breadadams / scroller-motion

🛹 Elegant motion scrolling for React
https://scroller-motion.js.org
MIT License
68 stars 5 forks source link

Provide Scroll Progress Values #26

Closed MrUltimate closed 2 years ago

MrUltimate commented 2 years ago

Hey,

Thanks for keeping this up to datee.

Framer-Motions's useScroll() api provides additional values like scrollYProgress and scrollXProgress which return a motion value between 0 and 1. This is useful for create scroll progress animations and the like, is there a way to access this for scroller-motion?

Thanks!

MrUltimate commented 2 years ago

I realize now this might not be possible until this is refactored to use useScroll(), I've made made another issue: #27

For your reference: https://www.framer.com/docs/use-scroll/

breadadams commented 2 years ago

Hey @MrUltimate, as mentioned in #27 I'll address this asap.

Just to share, in my own projects I've achieved a similar 0-1 motion value via a transform using the scroll variables exposed from scroller-motion and the total scroll height. However I'm sure their ootb solution is better 👌

breadadams commented 2 years ago

Just a small follow-up here, to get the "correct" progress variables while using scroller-motion, you should read the newly added scrollXProgress and scrollYProgress variables - exposed in the useScrollerMotion hook (and Motion Listeners).

The difference between these variables and those with the same name from framer-motion's useScroll is that the useScrollerMotion version has the configuration applied (spring, scale, etc), making it true to what's displayed on the screen.

For example, with <ScrollerMotion scale={2}>, useScroll would report that you're at the end of the page before you really are.