How to get 'active' slide from this draggable slider

[glenn_pot]

I modified this slider a while ago to include a (somewhat) arch effect and now I want to expand it to display content below the slider which changes dependent on the 'active' slider at the top.

I could do this with some simple fadeIn/hide direction based on matching data attributes but since className is out with GSAP3, I'm not sure how to throw this function into the mix.

 

See the Pen VwKRpYe by glenn_pot (@glenn_pot) on CodePen

[ZachSaucier]

Hey glenn_pot. As with most things, there are multiple ways to do this sort of thing. I'd probably position some content absolutely over that section. Then you can either fade out the old content, replace it, then fade it in again or just have all of the content there and fade/show what you need to do. You could use the onThrowComplete and/or onDragEnd callbacks depending on the effect you want to create. To get the correct index of the end position you should make use of the endX property. 

[glenn_pot]

Thanks @ZachSaucier. I get that I can use onThrowComplete and onDragEnd callbacks to know when the whole slider has moved but I'm unclear as to how to actually identify the active slide, so I can grab it's data-attribute or whatever. From there, I know how to use that to switch out content below.

 

This is where the updates happen to the active slide
 

.to(element, cellStep, { scale: 1, repeat: 1, yoyo: true }, 0.5 - cellStep);

but where would the function to grab attributes from it go? or something equivalent to toggleClass() ?

Edited January 29, 2021 by jeepee3
added info

[ZachSaucier]

Like I said, you use the endX to calculate it. Looking at your demo, you could do something like this:

See the Pen eYBYMyw?editors=0010 by GreenSock (@GreenSock) on CodePen

[glenn_pot]

@ZachSaucier! I never thanked you for this 🤠

 

Now I've run into a new issue. The carousel works great on load, the onRelease function works great. But when the window is resized or just scrolled on mobile, the carousel breaks down if you swipe it again. I think it's the window resize function that's causing this but I need the values to be recalculated on resize. Ideally, I'd like to have 3 showing at <768px and 5 showing on anything larger.

 

Is there a better way than this to recalculate these values smoothly on window resize and could this include a cellWidth window% update at a certain browser width?

 

See the Pen JjbrXpE by glenn_pot (@glenn_pot) on CodePen

[ZachSaucier]

You're currently creating a new animation, Draggable, etc. on every single resize event. And you're not killing off the old ones. That's no good! You're bound to have issues with that approach.

 

I'd probably kill off the old animation and Draggable and create a new one. I did the same sort of thing in this demo (from this article) - there's some extra stuff added that you can ignore but the core approach should be apparent. It'd also be best to throttle/debounce the resize event.

See the Pen eYZqLOV?editors=0010 by ZachSaucier (@ZachSaucier) on CodePen

[glenn_pot]

@ZachSaucier Man, I have tried in vain to learn from that demo and take what I need for mine but it's just not working. Any additional direction would be much appreciated.

[ZachSaucier]

What, specifically, are you having trouble with?

[glenn_pot]

@ZachSaucier Well specifically, how to kill both animation and draggable instances on window resize and recalculate. My method above fails to kill the current instances exists on resize, and I understand how that's the wrong way to go and is the reason for the breakdown.

 

Your method doesn't use the kill() method, which I noticed elsewhere, so I'm just looking for the most efficient way to do this.

[ZachSaucier]

3 minutes ago, jeepee3 said:

Your method doesn't use the kill() method

It did kill the draggable instance. I went ahead and added a .kill() for the animation as well.

 

4 minutes ago, jeepee3 said:

how to kill both animation and draggable instances on window resize and recalculate

I am afraid I don't know of a better way to explain than showing you an example of it happening. Obviously you will need to apply the technique to your version appropriately but the core approach is the exact same.