search

jscottsmith / react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.
https://react-scroll-parallax.damnthat.tv/
MIT License
2.9k stars 158 forks source link

I want to slow down the scroll speed for one container and increase the speed of other container. How can I do that dynamically? #168

Closed lakshbhutani1 closed 2 years ago

lakshbhutani1 commented 2 years ago

Bug

Attaching the link of code sandbox https://codesandbox.io/s/sad-khayyam-huxy9m?file=/src/App.js

I want to increase the speed of A container when items in A are many(let's suppose more than 30) and decrease the speed of I G B container at right and similarly with the other side (i.e if items in G are many(lets's suppose 100) and items in A are lets suppose 10 I want to decrease the speed of I G B container and increase the speed of the right A container). On the initial load both are present at top of the screen(viewport).

So, the issue is when I add speed(-ve or +ve) to them both of them, it adds an extra translateY as mentioned in the docs. How can I change the speed of the containers dynamically. Any solution to that?

jscottsmith commented 2 years ago

Appreciate the CodeSandbox but I'm not sure I understand the intent here. You can change the speed dynamically but the result won't be smooth. My guess is you're trying to do something that could be accomplished another way and that this library isn't going to be much help for you.

If you have a design or mockup you're trying to reproduce I'd be happy to help suggest alternative approaches but not sure I can help at this point.

lakshbhutani1 commented 2 years ago

I've updated the sandbox. https://codesandbox.io/s/sad-khayyam-huxy9m?file=/src/App.js So the question is while scrolling vertically, I want to slow down the scroll speed of G container and increase the speed of A container. How can I achieve that because when I add speed to both container(let's say -100 to G and and 100 to A), it adds some margin top and margin bottom. any solutions to that? @jscottsmith or any other you know of would help to achieve this?

jscottsmith commented 2 years ago

I don't think this library will work for your needs. I wouldn't recommend changing the speed dynamically. It's not how it was intended to be used.

If you have a prototype of the design your trying to achieve please link it here and I can recommend some alternative approaches.