Closed rijk closed 4 years ago
Hey @rijk, I've been using the library with fixed positioned elements, by placing them outside the ScrollerMotion
component, something like:
<>
<ScrollerMotion>
...
</ScrollerMotion>
<FixedElement />
</>
Does that fit your use case?
which looks kind of wonky
If I'm not mistaken that's only because in the demo I'm using window.requestAnimationFrame
, to get 60fps mapping of the scroll updates. Without that the animation should be a bit more static.
Haha, such a simple solution, I love it! Can I suggest you implement this for the controls in the demo as well? It works better and might help people with the same question in the future.
Thanks for the input @rijk, I was hesitant on whether to include it in the demo funnily enough, but I think you're right.
That effect would be more suitable for some parallax elements for example, rather than for a fixed toolbar 😅 🤦 .
This one is actually visible in your demo as well; when using it's not really possible to have true
position: fixed
elements anymore. I need this for a slide-over menu for example. This of course is due to the way the browser renders fixed items inside a transformed element, but it would be nice to have a solution for this. The workaround in the demo (hooking up an onUpdate and passing theMotionValue
to 'counter-scroll') is not really elegant, especially in larger code bases where you have to pass it through multiple layers, and also doesn't exactly counter the scrolling which looks kind of wonky (can be seen in the demo controls as well). Also, because this gets its own block due to the transform, vertical alignment changes, as can be seen here:Because of these issues, I think a good solution would be to offer an escape hatch for rendering elements outside of the scroller-motion wrapper that is transformed. What do you think?