Dynamic Widths for GSAP Auto-Slider

[pietM]

Hi everyone, 

Attempting to set dynamic widths for GSAP's boilerplate auto-slider. Searching though the forums, Jack offered up a beautiful scrollTrigger implementation:

 

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

 

but I'd like to preserve the draggable functionality here. 

As always, appreciate any help here. 

 

See the Pen BajOmNJ by euqio (@euqio) on CodePen

[ZachSaucier]

Hey piet. Those two approaches are not really compatible. They have very different approaches to how to navigate the carousel that would conflict with each other. 

 

The only way to really use scrolling to go through an infinite carousel like that is if the scrolling in that section is prevented from moving the page's scroll position at all. Then you'd use the wheel event to create your own version of scrolling that affects the transforming of the elements. I believe this is the sort of thing that hammer.js can help do (though you could write the functionality for it yourself).

 

If the carousel isn't infinite/doesn't wrap then it's much more easily compatible. But at that point what's the point of the animation.

[pietM]

Thanks for getting back, Zach. 

 

I note the difference above. One is a scrollTrigger / scroll-activated horizontal scroll, the other is an infinite auto-slider.  My question relates specifically to GSAP's auto-slider (

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

) and how to calculate wrapper width with slides of varying / dynamic widths.  

 

In the the pen I submitted, the slider doesn't calculate the variable slide widths without breaking. You can see the issue in slide 2 of the submitted pen. 

 

Does that make sense? Thanks again! 

 

 

[ZachSaucier]

Ah, I see.

 

That's a non-trivial task. I'd approach it by trying to get all of the dragging and snapping functionality working. You might need to use a custom snap function instead of just a number since the widths vary. 

 

Once you get the dragging working then adding the animations shouldn't be too hard.

 

Let us know if you have specific questions.