Draggable Infinite Carousel with Snap and Indexing

[Nick.Ls 7 Likes (Newbie)]

Hi everyone,

 

I've been using GSAP for so long that I think I am having a weird brain freeze and I am unable to create an indexing where the middle

image on the slider will take a, let's say, "selected" class. 

 

I have used a previous implementation I found in my codepen and I have commented the section where I started my effort of getting an index

value for start. Under the snap function.

 

Any help would be greatly appreciated!

See the Pen ZErXqNX by Nick_Ls (@Nick_Ls) on CodePen

[GreenSock 18,577 Likes (Superhero)]

Hi @Nick.Ls. Thanks for being a Club GreenSock member! 🙌

 

There's a lot of code in there to digest and I'm not 100% sure what you're asking for here. Are you wanting help to know how to calculate the index of the element that's in the center of a fixed-width area like that? Or dynamically based on a resizing viewport area, etc.? 

 

Typically we really try to stay focused on GSAP-specific questions in these forums (steer clear of general logic issues), but if there's something I can quickly help with I'll do my best. It would certainly help if your minimal demo only had the absolutely essential pieces to show the problem you're trying to solve (a few colored <div> elements is fine). 

 

Also, you may want to look at the helper function in the docs for seamlessly looping things on the x-axis. There's even a draggable version. 

[Nick.Ls 7 Likes (Newbie)]

Hi Jack,

 

Everything works as intended at this point except the feature of returning the viewable images and specifically the middle one.

What I am actually trying to accomplish is a way to add a class in the middle image after I drag the carousel.

I can't figure it out though doing through draggable.

 

I have tried creating some kind of index calculation but with no luck under the helper functions. See the snap() function where I have commented my progress.

[Nick.Ls 7 Likes (Newbie)]

Hi again,

 

20 hours ago, GreenSock said:

Also, you may want to look at the helper function in the docs for seamlessly looping things on the x-axis. There's even a draggable version. 

I've seen also the draggable demo on the helper function and same question applies there? How could I possibly add a class to the middle image once the drag ends animating?

 

I am going to research a bit more through that demo but that's a lot of code to process. I'll come back with my findings if I come close to a solution on

my situation.

 

Thanks!

 

[GreenSock 18,577 Likes (Superhero)]

If you'd like some more help, @Nick.Ls, we'd be happy to take a look at a minimal demo where you tried applying the helper function. 

[Nick.Ls 7 Likes (Newbie)]

Hi Jack,

 

I have used the drag carousel from the helper functions where with tl.current() I retrieve the index increment it to match the center index always and then I pass as a class as I intended to do from the beginning. And it works!

 

I can give you a demo for future reference if you need.

 

Thank you for your interest though! Helper function gave me what I needed it to move on.

[Cassie 5,385 Likes (Superhero)]

It's always helpful for future thread readers to post a solution! ☺️ Glad you got it sorted.

[Nick.Ls 7 Likes (Newbie)]

Here you go,

 

It's a copy from the draggable carousel on Helper Function with some additions to calculate the middle item. I have commented on the code

so you can with ease the additions. And of course I am available if someone needs some further clarification.

 

(the red box that appears is your center element)

See the Pen mdXxLXJ by Nick_Ls (@Nick_Ls) on CodePen

[Cassie 5,385 Likes (Superhero)]

Thanks for popping back!

 

I've tweaked it a little as you weren't wrapping the value returned so it was a bit buggy (didn't highlight 1 and 2) But overall great job figuring this out.

See the Pen zYRWmOb?editors=0011 by GreenSock (@GreenSock) on CodePen

[Nick.Ls 7 Likes (Newbie)]

Oh thanks @Cassie,

 

I hadn't noticed that bug... Guess the "lottery spinner" didn't land on 1 or 2 to see the error. You're right!

 

Nice!

[GreenSock 18,577 Likes (Superhero)]

I spent a bunch of time reworking the helper function to accommodate a new option, center: true which will basically make the active element be the one that's centered in the container. Here's a fork that adds an "active" class to the element in the center, and I made one of the elements wider just to make sure it still works when they're not all the same width: 

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

 

I added an onChange callback as well which gets called when the "active" element changes. It's responsive, and the momentum-based snapping works with the centering too. 👍

 

Does that help? 

[Nick.Ls 7 Likes (Newbie)]

Hey Jack,

 

That is truly a rework! Yes, it helps a lot! My code did the work but this is educational the least. I am going to break down the code to see

what you actually did. Very helpful!

 

Thanks again!

 

[joris-rotteveel 18 Likes (Newbie)]

Jack, this is amazing!

[Alex Jester 6 Likes (Newbie)]

And I can't thank google enough for bringing me on this topic...

Many thanks to Jack!

[ThinkingAbout_dev 4 Likes (Newbie)]

Thanks @GreenSock for the amazing example! 
Do you think it's possible to add the "autoplay" feature to the last demo (the slides move automatically, stop during the drag and start again when released)?
🙌

[Cassie 5,385 Likes (Superhero)]

Right here in the setup!

 

const loop = horizontalLoop(boxes, {
  paused: true, // <----- autoplay, change to false
  ...
});

 

[ThinkingAbout_dev 4 Likes (Newbie)]

Thanks @Cassie, great!! Hadn't noticed that, I also added repat: -1 to make it infinite. ❤️

[aerra 2 Likes (Newbie)]

Amazing demo, @GreenSock. I realise it's in the name of the function to be horizontal, but I was wondering if there is a way to make this vertical but keep the same other features? (center mode, drag, focus on click etc)

[Nick.Ls 7 Likes (Newbie)]

Greetings aerra,

 

The helper function used for this example, as I see it, is built to maintain and calculate the widths of the container and the respective items beneath.

 

You surely can achieve a similar example to vertical slider / carousel with gsap but I would go with a fresh approach. There are a lot of examples

based on gsap3 if you search for it in order to find a starting point.

 

Last but not least, post your codepen example here if you make any progress and lot's of people will guide you through to your questions.

 

I believe the experts will correct me if I am wrong about the helper function.

 

Wish you a good day!

[aerra 2 Likes (Newbie)]

Hi @Nick.Ls,

 

I actually managed to achieve the vertical loop modifying the original `horizontalLoop` function. Here's a codepen: 

See the Pen PoyGaQr by aerra (@aerra) on CodePen

.

 

If anyone sees any issues with this, please do let me know.

[Nick.Ls 7 Likes (Newbie)]

Well @aerra,

 

this seems like a solution to your request. I will try and give it a better look later on and come back with any findings if so.

 

Nice!

[Rodrigo 5,407 Likes (Superhero)]

Hi,

 

We actually have a Vertical Endless Loop helper function as well that Jack created a couple of months ago:

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

 

In this thread there is an example without Draggable though, but it should provide a good starting point:

 

Hopefully this helps.

Happy Tweening!