[Circular Carousel/Slider]

11 minutes ago, mvaneijgen said:

yeah, sure? Everything is possible! The question is how much custom code is that going to need. I'm not completely sure what it is you're trying to do, so if you could provide a minimal demo with the current setup and tell us what you've already tried, someone here will be happy to take a look at your code. 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

 

Hi, sure I can provide a demo. Here it is:

 

See the Pen qBgXgWw by zubrik (@zubrik) on CodePen

 

Now all the items fill the 360º of the circle. I'd like them to fill just the right half of it. Item 1 would be at 0º, item 2 at 36º, etc.

On every click of the Next button, items would move 36º.

I hope what I'm trying to do is clearer now.

Thanks.

 

[Circular Carousel/Slider]

On 11/6/2023 at 9:11 AM, mvaneijgen said:

Hi @Bernat__ welcome to the forum!

 

Have you see the motion path property autoRotate (https://gsap.com/docs/v3/Plugins/MotionPathPlugin)

 

 

Hi again,

 

Thanks to autoRotate I've achieved what I was looking for.

 

Now I'm trying to modify another aspect of the carousel: the carousel I'm building has 5 items, and I'd like them to fill just one half of the circle (180º) not 360º as they do now. The first item should be in the 0º position, and each item would be separated 36º from the next one. When the user clicks the Next button, the items would rotate 36º, and the second item would be in the 0º position, and so on.

 

Is it possible to achieve that? Any indication is appreciated.

 

Thanks.

[Circular Carousel/Slider]

On 11/6/2023 at 9:11 AM, mvaneijgen said:

Hi @Bernat__ welcome to the forum!

 

Have you see the motion path property autoRotate (https://gsap.com/docs/v3/Plugins/MotionPathPlugin)

 

 

Thanks a lot! I'll try what you say.

[Circular Carousel/Slider]

On 3/16/2023 at 4:37 PM, Rodrigo said:

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:

 

 

 

Hi,

 

I'd like to use the code on this Codepen, but I need the circles to be rotated depending on their position on the main circle. I'm adding a mockup to show what I mean. How could I achieve that? Thanks.