Giters

jscottsmith / react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.

Home Page:https://react-scroll-parallax.damnthat.tv/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

lakshbhutani1 opened this issue · comments

commented

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?

commented

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.

commented

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?

commented

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.