Use GSAP Dragable with React JS to create Horizontal Scroll

[SGRMHDK51]

Hi All, I am trying to create a Horizontal scroll component with React JS. So far I have created the component, my goal is to use the drag able to slide in the next component i.e image to viewport. Request guidance on how do I proceed with this. Referred the questions asked on the forum but not able get my head around the concept.

 

Please help, Thanks in advance..

 

Note : Please inspect the code for Mobile view as Page is supposed to be mobile responsive

 

Kindly find below the Codesandbox link, 

 

https://codesandbox.io/s/amazing-mestorf-o753c

 

 

[ZachSaucier]

Hey SGRMHDK51. I'm not sure I understand what your goal is. Your demo has a ScrollTrigger animation applied. Are you also wanting a Draggable animation? Or perhaps for them to both control the same animation? If that's the case you'd have to make sure to keep the two synced somehow. For example if you drag the slider then you'd have to update the page's scroll position. 

[SGRMHDK51]

Hi Zach,

 

Please refer to the first component in the below link, If we swipe/drag the image next image is loaded viewport.

Just below the Hello./

https://dry-wave-69717.herokuapp.com/gallery

 

You will have to access the link on mobile as it is only optimized for mobile screen, sorry for the inconvience.

 

I am trying to create same effect with GSAP additionally trigger and additionally trigger the scale animation on scroll.

 

Is that possible?

 

 

[ZachSaucier]

ScrollTrigger and Draggable are not the most trivial things to combine. I recommend creating the ScrollTrigger animation/functionality fully as you want it. Then add Draggable to a proxy element (this demo shows a proxy in use) and inside of its onDrag/onThrow you calculate how much of the ScrollTrigger's progress would have been changed by that drag amount and update the ScrollTrigger's progress by changing the scroll position using .scroll.

[SGRMHDK51]

1 hour ago, ZachSaucier said:

you calculate how much of the ScrollTrigger's progress would have been changed by

Hi Zach, If ou do not mind can you help me undestand how do I caculate it..

[ZachSaucier]

Just now, SGRMHDK51 said:

help me undestand how do I caculate it

Well, the drag/throw action will "move" the proxy (the proxy doesn't have to be rendered anywhere, hence the quotation marks) by a certain number of pixels. So you get that number and add it to the scroll position. 

[SGRMHDK51]

Hey Zach, Apologies for delay in response..

 

I fiddled around with the proxy to get desire effect but was not able to do so, after a thought I realised that main issue i was tying to address was to speed up scroll, so I added the code to increase the scroll speed and synced up a the text to previous image and placed trigger on the same, to get the effect.

 

Just adding code-sandbox here for future reference,somebody may find this helpful. Would work on "Proxy" to use the drag-able..

 

https://o753c.csb.app/  

 

Note: Please open link in mobile view