Provide Scroll Progress Values
MrUltimate opened this issue · comments
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!
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/
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 👌
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.