Jump to content
Search Community

Circular Carousel/Slider

AdventurousDeveloper test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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. 

 

 

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

 

Cheers,

Link to comment
Share on other sites

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.

 

 

 

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,

 

  • Like 1
Link to comment
Share on other sites

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,

 

  • Like 1
Link to comment
Share on other sites

  • 11 months later...
  • 1 month later...

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?

Founders-Club.png

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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


 

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

  • 5 weeks later...
27.11.2022 в 22:11, GreenSock сказал:

 

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

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

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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()

 

 

Link to comment
Share on other sites

  • 1 month later...
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 
});

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...