Multiple scrolling axis in one element

[tonirpk]

Hello, I've an element with multiple divs inside, some of them work vertically but other not. How is it possible to add a specific scrolling direction to one div instead of the whole element?

[jscottsmith]

You'll need to wrap each div with it own ParallaxProvider and set the scrollAxis accordingly.

Here's a demo with multiple scrolling containers -- one vertical, one horizontal.

See the App for how this is achieved with multiple providers:

https://codesandbox.io/s/react-scroll-parallax-multiple-scroll-containers-28o8f7?file=/src/App.tsx

Let me know if you need more help.

[tonirpk]

Thanks for your answer, actually yeah, I need more help. I think I asked the question in wrong way, sorry. What I meant is the "speed" depends on the scroll direction of whole page, but what if one element is moving horizontally, how do increase the speed of that div in a horizontal way.

[jscottsmith]

Ok, not sure I fully understand the problem but maybe this will help.

The speed prop is only an abstraction for setting translateY or translateX based on the scroll axis. Each increment of speed by one will increase the translate effect by 10px.

So for example: With a vertical scroll axis, speed: 10 is equivalent to translateY: ['100px', '-100px'] and speed: -10 is equivalent to translateY: ['-100px', '100px'].

If you want the element to move horizontally no matter the scroll axis use translateX with whatever start/end values you need.

Please send a code example or mock of what you are trying to achieve if this still doesn't answer your question.

[tonirpk]

So I've this code `

<Parallax translateX={[-20, 20]} className="bg8 parallax_image"

<Parallax translateX={[150, -90]} translateY={[-40, 40]} className="bg7 parallax_image"

<Parallax translateX={[150, -90]} translateY={[-40, 40]} className="bg6 parallax_image" </div`

I wanted to make Parallax with className bg6 move faster than Parallax with className bg7, is that possible?

[jscottsmith]

I really need a better description of what you are trying to achieve to be of any help. Is this code hosted somewhere? A CodeSandbox would be very helpful...

If you want something to appear to move faster in comparison to something else, you can increase size of the translations relative to the other.

[tonirpk]

Yeah, you're completely right! To change the speed all I had to do is to increase size of the translations relative to the other. Now I'm hoping to see more explanation about startScroll, endScroll and targetElement. Thanks a lot.

[jscottsmith]

Glad it worked out. Please share if you have ideas on how I can improve the docs so other user don't get stuck as you did.

[tonirpk]

Honestly your code is awesome and I appreciate all the afford and time you put on it, so thank you. However It would be nicer in general to add some new attribute to speed up movement such astranslateX={[X1, X2]} movementSpeed={[??]} instead of changing the translations in each element manually. for example multiplying or dividing (not sure) the number of X2 or Y2 intranslateX={[X1, X2]} and translateY={[Y1, Y2]} in another number ?? in speed={[??]} to make the speed slower or faster.

[jscottsmith]

Perhaps what may be more clear to users would be something like speedX and speedY. Their behavior would be limited to the corresponding x/y axis, but would essentially be the same as speed.

If that were the case you could do:

<>
  /* horizontal movement */
  <Parallax speedX={10} /> 

  /* vertical movement */
  <Parallax speedY={10} /> 
</>