Amplified Draggable Carousel Using GSAP + Draggable + Inertia

[Mantrone]

Hi everyone,

 

I’m working on creating a draggable carousel using GSAP and Draggable. I’ve managed to get the drag functionality working with amplified movement of the slides. However, I’m facing an issue where I can’t get the .inner-slider to stop correctly so that the last slide aligns with the right side of its container. Additionally, I want to maintain an ease effect in the movement to keep everything smooth.

You can see a similar effect here: https://wearemotto.com/ in the “Praise of clients” section on the home page.

 

Could you please help me identify what I’m doing wrong or provide guidance on the correct approach? If there are any examples or tutorials that demonstrate a similar implementation, I would greatly appreciate it.

 

Thank you for your assistance!

 

Best regards,

Marco

 

See the Pen VwOaMLw by marco-lascialfari (@marco-lascialfari) on CodePen

[Rodrigo]

Hi,

 

Most likely this is related to the calculations you're making for the bounds. Here  is a simple demo that shows a minimal setup for something like the URL you posted:

See the Pen xxNOVgB by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Mantrone]

Hi,

 

Thank you for your response and for the example you shared.

 

Unfortunately, it’s not very helpful as it appears to be a normal draggable carousel.

 

I need to maintain the features of smooth movement and increased scrolling speed.

 

It seems that the issue with the boundaries might be due to the fact that we are moving the slide container at double the speed of the drag, resulting in the container traveling twice the distance. Consequently, it does not respect the container’s limits.

 

Thank you again. I look forward to any further help you can provide and will continue experimenting on my own in the meantime.

 

Best regards,
Marco

 

 

[Mantrone]

Hi again,

 

I wanted to let you know that I’ve resolved my issue. I ended up using Swiper.js to achieve the desired effect.

 

Although I’m happy to have resolved the problem, I regret not being able to do it entirely with GSAP and its premium plugins. I’m not that skilled. I’m sorry to post a solution that doesn’t fully utilize GSAP.

 

Thank you for your support and assistance.

 

Best regards,

Marco

 

Codepen solution:

See the Pen pombWGO by marco-lascialfari (@marco-lascialfari) on CodePen

[mvaneijgen]

Well it is exactly what you said. 

 

3 hours ago, Mantrone said:

It seems that the issue with the boundaries might be due to the fact that we are moving the slide container at double the speed of the drag, resulting in the container traveling twice the distance. Consequently, it does not respect the container’s limits.

 

By setting the bound to half the width you've calculated it works as expected. Hope it helps and happy tweening!  

 

See the Pen JjqKpBg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

8 hours ago, Mantrone said:

I need to maintain the features of smooth movement and increased scrolling speed.

Sorry but I don't understand how the demo I posted doesn't meet those requirements. It uses Draggable with inertia and unlike the demo you linked the one I posted actually has snapping, so you'd never see a card or element halfway. Also I stated in my first  post that you were missing something in the bounds calculations, as Mitchel also pointed out. Unfortunately I didn't had the time to go through all your logic and find that at the time.

 

Finally keep in mind that using the Inertia Plugin opens a broad set of options for your Draggable instance, such as min and max duration to smooth the toss even further:

https://gsap.com/docs/v3/Plugins/Draggable/#inertia

 

Happy Tweening!

[Mantrone]

5 hours ago, mvaneijgen said:

By setting the bound to half the width you've calculated it works as expected. Hope it helps and happy tweening!

Perfect @mvaneijgen 🥳, this looks exactly like what I needed. I’m glad you made me realize that I had grasped the concept. I was stuck.

 

1 hour ago, Rodrigo said:

Sorry but I don't understand how the demo I posted doesn't meet those requirements. It uses Draggable with inertia and unlike the demo you linked the one I posted actually has snapping, so you'd never see a card or element halfway. Also I stated in my first  post that you were missing something in the bounds calculations, as Mitchel also pointed out. Unfortunately I didn't had the time to go through all your logic and find that at the time.

I discovered through the Swiper.js documentation that the correct name for the functionality this slider should have is touchRatio. This option increases or decreases the movement of the slide container relative to the mouse drag, creating a sort of parallax effect between the slides and the mouse drag. When I mentioned ‘increased scrolling speed’, this is what I meant. Sorry if I didn’t express myself clearly, but I didn’t know what to call this functionality. Anyway, thank you very much for the help you provided.