how do I recreate this circular slider?

[screencore]

hi, i am new to gsap. i became aware of it because i want to recreate this slider. but i have no idea how to start. any advice? 

https://www.bilo.ua/en/

at the end i want a slider that moves in a circle and has a nice animation

 

thanks in advance

[Rodrigo]

Hi @screencore and welcome to the GreenSock forums!

 

There are a few ways to implement that, some more complex than others. Unfortunately we don't have the time resources to build custom solutions for our users, but we can provide some starting points that help you get started.

 

Take a look at these examples:

See the Pen yLEPvrX by GreenSock (@GreenSock) on CodePen.

 

See the Pen BzZOYx by GreenSock (@GreenSock) on CodePen.

 

Hopefully these give you enough inspiration to work on your project. Let us know if you have more questions and remember to include a minimal demo.

 

Happy Tweening!

[screencore]

3 hours ago, Rodrigo said:

Hi @screencore and welcome to the GreenSock forums!

 

There are a few ways to implement that, some more complex than others. Unfortunately we don't have the time resources to build custom solutions for our users, but we can provide some starting points that help you get started.

thanks for reply. i almost get it done with this example. 

See the Pen QWxOBXx by screencore (@screencore) on CodePen.

the only thing is, that i want to show only 3 items in a row.  i wondering if i just can set the opacity to 0 and increase it back to 1 by dragging the item to the center.  maybe i just can add a css class to the element after dragging it to center.

 

[Rodrigo]

Hi,

 

Setting up something like that is not super trivial.

 

You have elements with fixed widths in px but it's parent has a percentage based width, so you should take into account how to separate them in the initial setup based on the width of the parent and the width of each element. Doing this creates more separation for the cards but, again, that depends on the parent width, so you should look into that in order to find some kind of factor that accounts for the parent's width:

function initCell(element, index) {

  gsap.set(element, {
    // width: cellWidth,
    scale: 0.9,
    opacity:0.5,
    rotation: rotation,
    x: -(cellWidth + 125)
  });

  var tl = gsap.timeline({ repeat: 1 })
    .to(element, 1, { x: "+=" + (wrapWidth + 250), rotation: -rotation}, 0)
    .to(element, cellStep, {scale: 1,opacity:1, repeat: 1, yoyo: true }, 0.5 - cellStep)

  baseTl.add(tl, i * -cellStep);
}

I think you should consider using the MotionPath Plugin as an option:

https://greensock.com/docs/v3/Plugins/MotionPathPlugin

 

Finally I was combing through some Codepen examples and found this:

See the Pen eYEXmJm by GreenSock (@GreenSock) on CodePen.

 

I think that should provide more inspiration and a solid starting point for this, all you have to do is replace ScrollTrigger with Draggable.

 

Happy Tweening!

[screencore]

10 hours ago, Rodrigo said:

[...] Setting up something like that is not super trivial. [...]

I think you should consider using the MotionPath Plugin as an option:

https://greensock.com/docs/v3/Plugins/MotionPathPlugin

Hey, thanks for your effort. i'll look into the MotionPathPlugin. 
but I'm afraid I didn't make myself clear

I just want to display 3 items. When dragging they should be faded in and out. Basically i only want to show the ones that have the following css property 
transform: translate3d(750px, 0px, 0px);
transform: translate3d(1000px, 0px, 0px);
transform: translate3d(1250px, 0px, 0px);

so always the one in the middle and the one to the right and left of it .... 

i used to do this with the slick slider and just gave a class to the previous slide. the rest i could solve with css. 

$(this).find('.slick-current').addClass('prev-slide');

so if there is a way to add a css class that would be my solution. but i don't know where that should happen. 

[screencore]

ok, it's a bit hacky but I#m alomost there

i just modified the onDragEnd i just need to query if i == 0 etc.

 

onDragEnd: function() {
                const i = wrapIndex(-this.endX / wrapWidth * cells.length - 5);
                console.log(i);

                const _slider = DomAccess.querySelector(document,'.card-slider');
                const _slides = _slider.querySelectorAll('.cell', false);

                Iterator.iterate(_slides,(element,key) => {
                    $(element).removeClass("is-left-slide");
                    $(element).removeClass("is-right-slide");
                    $(element).removeClass("is-current-slide");

                });

                $(_slides[i-2]).addClass("is-left-slide");
                $(_slides[i]).addClass("is-right-slide");
                $(_slides[i-1]).addClass("is-current-slide");

            }

But now I need a function to move the items by click not only drag. what is the best approach?

thank you!

[screencore]

On 11/18/2022 at 11:12 PM, Rodrigo said:

I think you should consider using the MotionPath Plugin as an option:

https://greensock.com/docs/v3/Plugins/MotionPathPlugin

 

Finally I was combing through some Codepen examples and found this:

 

 

 

I think that should provide more inspiration and a solid starting point for this, all you have to do is replace ScrollTrigger with Draggable.

 

hey @Rodrigo, thanks again. i tried to go with the MotionPathPlugin. unfortunately i can't get the dragable thing to work.  i changed the ScrollTrigger with Dragable but i'm only able to drag the whole wheel but i can't turn it. 

See the Pen yLEpXVz by screencore (@screencore) on CodePen.

Could you please give me another hint on how to get there?

thanks in advance

[GreenSock]

I don't have much time to dig into this, but perhaps this will help: 

See the Pen zYapWgb?editors=1010 by GreenSock (@GreenSock) on CodePen.

 

And I just changed your Draggable type to "rotation" with some snapping and inertia (you need the plugin): 

See the Pen bGKaMbo?editors=1010 by GreenSock (@GreenSock) on CodePen.

[screencore]

that's great! thank you so much.

[M Sameer]

Hi There,

This works great thank you so much. Can we also add next/previous arrows as well? If any one can add that as well that would be awesome. I tried to add it but when I double click the arrow it doesn't calculate the rotation accurately.

 

leftArrow.addEventListener("click", (event) => {
	const myTimeout = setTimeout(() => rotateWheel(1), 500);
});

rightArrow.addEventListener("click", (event) => {
	const myTimeout = setTimeout(() => rotateWheel(-1), 500);
});

function rotateWheel(direction) {
	const totalImages = images.length;
	const angle = (360 / totalImages) * direction;
	

	const currentRotation = gsap.getProperty(".wheel", "rotation");

	const newRotation = currentRotation + angle;

	console.log('testtttt', images.length);

	gsap.to(".wheel", {
		rotation: newRotation,
		duration: images.length,
		ease: "power1.inOut",
		scrollTrigger: {
			start: 0,
			end: "max",
			scrub: 1,
			snap: 1 / images.length,
			invalidateOnRefresh: true
		}
	});
}

Thank you,

Sameer

[Rodrigo]

Hi @M Sameer and welcome to the GSAP forums!

 

This seems like the simplest approach IMHO:

See the Pen oNJrRgP by GreenSock (@GreenSock) on CodePen.

 

Other than that, it'd require to add more custom logic to this example and unfortunately we don't have the time resources for that. Other users though can chime in and try a different approach as well.

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

I wouldn't do it that way because it makes the next/previous buttons inoperable during tweening. Try clicking fast and you'll see that it feels wrong. I'd just use a variable to keep track of the destination value so you can click as much as you want and it still works: 

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

[DesignEbiz]

please help me I'm stuck.

[Rodrigo]

Hi @DesignEbiz,

 

Please don't post in other threads in order to ask for help in an ongoing thread.

 

On top of that you didn't provided a minimal demo in your other threads and we don't have the time resources to create custom solutions or solve complex logic issues for our users. Please read the forums guidelines:

 

Happy Tweening!

[M Sameer]

On 10/18/2023 at 1:34 PM, GreenSock said:

I wouldn't do it that way because it makes the next/previous buttons inoperable during tweening. Try clicking fast and you'll see that it feels wrong. I'd just use a variable to keep track of the destination value so you can click as much as you want and it still works: 

 

 

 

On 10/18/2023 at 1:34 PM, GreenSock said:

I wouldn't do it that way because it makes the next/previous buttons inoperable during tweening. Try clicking fast and you'll see that it feels wrong. I'd just use a variable to keep track of the destination value so you can click as much as you want and it still works: 

 

 

Thank you ! Now it works .

[needhelp]

On 10/19/2023 at 5:34 AM, GreenSock said:

I wouldn't do it that way because it makes the next/previous buttons inoperable during tweening. Try clicking fast and you'll see that it feels wrong. I'd just use a variable to keep track of the destination value so you can click as much as you want and it still works: 

 

 

thank you for this topic which helped me a lot! 
I just have a question, would it be possible to add a slide counter?
ex: 3 / 21 when the third slide comes in the middle?  4 / 21 , 5 / 21  etc..

[mvaneijgen]

Hi @needhelp welcome to the forum!

 

Of course that is possible! Just keep a variable called something like CurrentNumber and then hook in the next en prev functions to CurrentNumber++ or CurrentNumber--, all this logic will be basic Javascript. If you still need help please start your own topic (reference this one if you think it is relevant) and show us what you've already tried in a minimal demo ? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

Hope it helps and happy tweening! 

 

[Vinay_S]

Hello Team, based on the demo found here (https://codepen.io/GreenSock/pen/YzdmaeW), does anyone have suggestions on how we can add an 'active' class to only those card(So that it can be highlighted) when it moves to the center, considering both cases when: 
    1) the 'Next' or 'Prev' buttons are clicked
    2) cards are manually dragged
 

[mvaneijgen]

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!
 

I would start with creating an current index variable would  and hook in the the next and prev to update that index, then on complete of the animation, get the element based on the current index you're keeping. All this is normal Javascript, so a bit beyond the scope of this forum, but it shouldn't be that difficult. Personally it takes me around 10 versions to get where I want to go, so my advise fork the codepen and start coding. Hope it helps and happy tweening! 

[Rodrigo]

Hi @Vinay_S,

 

Maybe this demo can provide a good starting point:

See the Pen abMmppp by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!