Circular Carousel/Slider

[Bernat__]

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.

 

[mvaneijgen]

Hi @Bernat__ welcome to the forum!

 

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

 

Quote

Boolean | Number - Rotates the element in the direction of the path. true matches the angle of the path exactly, but you can offset the angle by any amount by defining autoRotate as a number (in degrees). For example, autoRotate: 90 would add 90 degrees to the rotation as it moves along the path. If you’d like the element to rotate from its center, simply set transformOrigin: "50% 50%". To align the path with the center of the target, either use alignOrigin: [0.5, 0.5] or set xPercent: -50, yPercent: -50 on the target before the motionPath tween.

 

[Bernat__]

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.

[Bernat__]

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.

[mvaneijgen]

7 minutes ago, Bernat__ said:

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

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: 

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

 

 

[Bernat__]

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.

 

[mvaneijgen]

You're using the MotionPath Plugin, this places items on a path using a range of 0 to 1. In this case 0 will be 0 degrees and 1,  360 degrees, so if you want half the circle you're have to put the elements in a range between 0 and 0.5. The circle you've drawn has its start in the middle right point, this is probably the default in SVG, so you have to rotate the shape -90 to move the point or draw your own shapes that has it start where you want it to. Same logic applies to moving the elements on click, itemStep needs to be 0.5 instead of 1

 

Hope it helps and happy tweening! 

 

See the Pen vYbJMjw?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi,

 

On top of Mitchel's great advice, you could look into this article by David DeSandro in order to get a better grasp of how disposing elements on a circular pattern works:

https://3dtransforms.desandro.com/carousel

 

Hopefully this helps.

Happy Tweening!

[ruisu1050]

On 11/28/2022 at 4:11 AM, GreenSock said:

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

 

 

Hello!

 

I am trying to do something like this, but i am having trouble to skip certain number (eg, circle 2) on drag or on click on next, is this posible?

[Rodrigo]

Hi @ruisu1050 and welcome to the GSAP Forums!

 

Thanks for being a Club GSAP member and supporting GSAP!

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials.

 

What have you tried in terms of this? You'd have to come up with the logic by keeping track of the current index in order to jump from 1 to 3 and the other way around as well.

 

I would recommend you to fork the demo you want to build from and give it a try. If you get stuck you can post back in the forums and remember to include a minimal demo that clearly illustrates the problem you're having.

 

Happy Tweening!

[aydinvivik]

On 12/7/2021 at 10:32 AM, 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.

 

 

 

 

I found exactly what I was looking for thank you, but do you have any idea how to make the active item in the middle of the top instead of on the right side?

 

Like this;

Edited March 10 by aydinvivik
I missed it, I did it :)

[aydinvivik]

27 minutes ago, aydinvivik said:

I found exactly what I was looking for thank you, but do you have any idea how to make the active item in the middle of the top instead of on the right side?

 

Like this;

I missed it, I did it