Circular Carousel/Slider

[DansDev]

Hi there,

 

Hoping someone out there might be able to point me in the right direction ?

 

My goal is to create a circular carousel/slider with Next & Previous buttons, pretty much the same concept as a traditional slider but in circular format.

 

The onclick of the next button, the carousel would rotate counter clock-wise and snap to next item in carousel. Onclick of the prev button, carousel would rotate clock-wise  and snap to the previous item. I'm also hoping to make each item/slide clickable, so the carousel rotates that item/slide to the starting arrow making that slide active.

 

Where I've got to..... I've managed to get the "items/slides" set to an svg circle element using the Motion Path Plugin and have setup two timelines which are actioned on next/prev button clicks. At the moment the carousel animates a full +360 or -360 and the items/slides also animate full +360 or -360 as I'm trying to keep them upright as the carousel rotates. Same as the baskets in the GSAP Ferris Wheel demo here - 

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

. 

 

I'm unsure on the steps to getting it to snap to the next or previous item and also how to keep the items/slides upright on rotation. 

 

Any help would be much appreciated!

 

Cheers,

See the Pen dyVMbdj by tracta_nz (@tracta_nz) on CodePen

[OSUblake]

Hi tracta,

 

You only need 1 timeline, and for snapping, check out GSAP's utility methods. We can use some of those animate the progress of the timline.

 

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

 

[DansDev]

9 hours ago, OSUblake said:

Hi tracta,

 

You only need 1 timeline, and for snapping, check out GSAP's utility methods. We can use some of those animate the progress of the timline.

 

 

 

 

 

Hey Blake,

 

Thank you for taking the time to help with this, I really appreciate it! Your solution was bang on!

 

Cheers

 

[DansDev]

Hi @OSUblake,

 

Thanks again for your help  

 

I'm now looking to implement an active class to the items. Meaning whichever item has the active class the timeline rotates/snaps to that item e.g. clicking item #5 would rotate the item #5 around to active arrow marker. I also plan on using the active class to style the items and control text content to show/hide.

 

I've got the on item click active class working and also the removing of the active class on click of prev/next buttons. But I'm unsure how to re-add the active class to the item in the timeline animation. 

 

See the Pen dyVMbdj by tracta_nz (@tracta_nz) on CodePen

 

If you have any insight on the best approach to tackle this I would be very grateful!

 

Cheers,

[OSUblake]

Not sure what you're using the active class, but that was causing some errors because an active item might not exist.

 

So how about this?

 

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

 

[DansDev]

7 hours ago, OSUblake said:

Not sure what you're using the active class, but that was causing some errors because an active item might not exist.

 

So how about this?

 

 

 

 

 

Hey Blake,

 

Whoooooa! Thank you so much, I was banging my head against a wall trying figure this out lol.

 

Yeah the active class was my attempt at toggling an active class on the active item e.g clicking #5 will set the active class to the 5th item - or if using the next button, the active class is removed from #1 item and added to the #2 item etc etc..

 

I've managed to get active class toggling working now, on click the class .active is added and styles applied.

 

See the Pen dyVMbdj by tracta_nz (@tracta_nz) on CodePen

 

 

My next challenge is getting the active class synced with the next and previous button clicks. I've tried a few things, but maybe I'm just not familiar enough with gsap.utils.toArray or arrays in general. My thinking is that I need to find the index of current item in gsap.utils.toArray and get the indexs of the next and previous items?

 

I had some success when it was going through the array, but once I hit the end it broke and also broke if I was on first item and went backwards.

 

Or maybe I'm approaching this from the wrong direction?

 

If you could give any insights I would really appreciate it and thanks again for taking the time to help me out!

 

Cheers,

 

[OSUblake]

That tracker object I'm animating gives the item index, so we can use that in the moveWheel function to advance the timeline progress to where it's going, find the item index, revert the progress, and then animate away. 

 

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

 

 

[DansDev]

16 minutes ago, OSUblake said:

That tracker object I'm animating gives the item index, so we can use that in the moveWheel function to advance the timeline progress to where it's going, find the item index, revert the progress, and then animate away. 

 

 

 

 

 

 

Wow I was completely going down the wrong track hahaha. Looks like I need to keep refreshing myself on the documentation and keep practising ?

 

Hey really appreciate you spending time looking at this, what a champ!

 

Cheers,

 

[GreenSock]

Revisiting this old thread to share a fancy helper function I whipped together that simplifies a lot of this and even makes it draggable/spinnable with inertia (disclaimer: InertiaPlugin requires a Club GreenSock membership): 

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

[hustler.wolf]

hey everyone

I managed to implement the code given by @AdventurousDeveloper on my website here but I'm stuck where can I change the active slide position to top instead of center right. I also want to implement the description dynamic in the center of the slider where it will show small text based on the active slide which is selected by the user.

Can anyone please guide me little bit on that, it would be a huge favor?

[Rodrigo]

Hi @hustler.wolf and welcome to the GreenSock forums!

 

Is almost impossible for us to debug a live site. It would really help if you could provide a minimal demo in codepen showing just that part of the code, not the entire project, in order to get a better idea of what you have so far.

 

Finally is worth noticing that the demo Jack made for the helper function does rotates the target element to the top center, check the helper function's instructions:

 

- activeAngle: Number - angle (in degrees) that's considered the "active" spot (defaults to -90 meaning the 12 o'clock position). 0 would be on the far right side. 90 would be bottom, etc.

 

Happy Tweening!

[hustler.wolf]

Hey @Rodrigo, thanks for you quick response, I checked that Jack had made an awesome slider that is exactly like I want it but the thing is he has used inertia plugin which I think I could not afford, so I was searching if I can use the code given by @AdventurousDeveloper and make progerss based on that:

Here is the same codepen demo that I want to make the active slide show in the top center instead of center right: 

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

 

[Rodrigo]

27 minutes ago, hustler.wolf said:

but the thing is he has used inertia plugin which I think I could not afford

The live example you have and the demo you provided don't use either Draggable or the Inertia Plugin, so you can set the draggable option to false:

let carousel = buildCarousel(items, {
  radiusX: 250,
  radiusY: 210,
  activeAngle: -90,
  draggable: false,
  onClick(element, self) {
    self.to(element, {duration: 1, ease: "power1.inOut"}, "short");
  },
  onActivate(element, self) {
    element.classList.add("active");
  },
  onDeactivate(element, self) {
    element.classList.remove("active");
  },
  // when a drag or animation starts (via the Carousel's to()/next()/previous() methods)
  onStart(element, self) {
    gsap.to(descriptions[items.indexOf(element)], {autoAlpha: 0, duration: 0.25, overwrite: "auto"});
  },
  onStop(element, self) {
    gsap.to(descriptions[items.indexOf(element)], {autoAlpha: 1, overwrite: "auto"});
  }
});

If you want to use the example with the red circles you can just offset the start and endpoints by minus 25%:

gsap.set(items, { 
  motionPath: {
    path: circlePath,
    align: circlePath,
    alignOrigin: [0.5, 0.5],
    start: -0.25,
    end: i => (i / items.length) - 0.25,
  }, 
  scale: 0.9 
});

The rest of the code should remain the same.

 

Yet another option with the latter example (red dots) is to set the start point of the path to the top of the circle. Check this article by @PointC

https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/

 

Hopefully this helps.

 

Happy Tweening!

[vlad89]

27.11.2022 в 22:11, GreenSock сказал:

 

Привет. Пытаюсь использовать реализацию из примера, но если точки находятся на разном расстоянии от центра, анимация работает некорректно. 

See the Pen gOjQgGK by vlad_fomin (@vlad_fomin) on CodePen

 

[Cassie]

Hi there - are you saying that the demo you've linked to isn't working?

It looks like it's working to me. If it's not and you want help with it could you possibly tidy up the codepen so that the JS, CSS and HTML are in the right panels, explain what adjustments you've made and clearly explain what the issue is.

 

Help us to help you more effectively.

 

Thanks!

[vlad89]

16 minutes ago, Cassie said:

 

done. problem with blue stripes. also points 1-8 are pressed against the circle when rotating

See the Pen gOjQgGK by vlad_fomin (@vlad_fomin) on CodePen

I would like to get the result like this. smooth movement to the desired point when clicking on it

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

[Cassie]

Ah ok I see. That's beyond the help I can offer I'm afraid. This is a bit tangly

To me it looks like you may be best stepping back and starting from scratch with your own needs in mind, rather than reverse engineering this helper function which wasn't created with this use case in mind.

I would probably start by creating an animation that spins the elements the way that you like. Maybe just rotating the entire container and then counter-rotating the numbers. Then once that's sorted you can use .seek() to jump to a particular point of that timeline on click.

https://greensock.com/docs/v3/GSAP/Timeline/seek()

 

 

[ag93]

Hi sorry to reopen this thread, it's exactly what I am looking for however cannot figure out how to have the active circle at the bottom center rather than to the right center. Any ideas?

 

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

[vlad89]

22 minutes ago, ag93 said:

Привет, извините, что снова открываю эту тему, это именно то, что я ищу, однако не могу понять, как сделать так, чтобы активный круг находился в центре внизу, а не в центре справа. Есть идеи?

 

 

 

gsap.set(items, { 
  motionPath: {
    path: circlePath,
    align: circlePath,
    alignOrigin: [0.5, 0.5],
    start: 0.25,
    end: i => (i / items.length) + 0.25,
  }, 
  scale: 0.9 
});

[Rodrigo]

Hi @ag93 and welcome to the GreenSock forums!

 

Just use GSAP Wrap util to offset the end position in the initial setup of the MotionPath Plugin:

gsap.set(items, {
  motionPath: {
    path: circlePath,
    align: circlePath,
    alignOrigin: [0.5, 0.5],
    end: (i) => gsap.utils.wrap(0, 1, i / items.length + 0.25),
  },
  scale: 0.9
});

https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()

 

Here is a fork of the codepen example:

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

 

Hopefully this helps.

Happy Tweening!

[ag93]

Exactly what I needed, thanks so much!

[S.A]

On 12/9/2021 at 5:41 AM, AdventurousDeveloper said:

Hello can anybody helo me to develop this for semi circle

 

Cheers,

 

 

[Rodrigo]

Hi @S.A and welcome to the GreenSock forums!

 

Unfortunately we don't have the time resources to provide custom solutions for our users in these free forums. I'd recommend you t get going with this on your own and if you get stuck at some point, with any GSAP related issue, we'll be happy to help you with that (remember to include a minimal demo).

 

You can contact us for paid consulting or you can post in the Jobs & Freelance forums to get help there.

 

Good luck with your project!

Happy Tweening!

[S.A]

Hello can anybody share the openion how make a value little bit tilled using the above slider

[Cassie]

Hi there - styling is in the realm of CSS, not GSAP
 

Unfortunately we don't have the time resources to provide custom solutions for our users in these free forums, especially if it's not related to GSAP.

 

Good luck with your project, and sorry we can't help.