2 GSAP Sliders on 1 Page

[bartmc]

Hello - I need to put two simple sliders on one page, both controlled by 1 set of next/previous buttons, so they change slides simultaneously.

I've made a pen with an illustration of my problem. The two sliders change slides together, but the slides in #2 follow sequentially after the slides in #1.

I understand that this is because the javascript just lines up all the slides sequentially, but I can't figure out how to separate the 2 separate groups of slides. I tried making 2 copies of the js and re-naming everything in the code, but it turned into an endless rabbit-hole for me and I still haven't figured it out. 

 

So - can someone point me to an example of two GSAP sliders running together on one page? Thank you!

 

Bart McLaughlin

See the Pen a602019fd26ea6bba3f02201f3539568 by bartmc (@bartmc) on CodePen

[Rodrigo]

Hi,

 

I don't have time to go through your logic and find out what could be the issue but hopefully this example can provide a good starting point:

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

 

Another choice would be to use the Horizontal Endless Loop helper function on two different elements:

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

 

Now syncing both on the same Draggable instance might be a challenge though. But as I mentioned we don't have the time resources to create custom complex solutions for our users in these free forums.

 

Hopefully this helps.

Happy Tweening!

[bartmc]

Rodrigo, your 2-slider example is exactly what I needed to get going. And I completely understand that these forums are not the place for me to find a complete solution for this kind of thing. Thank you!

 

bart