screencore

that's great! thank you so much.

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. https://codepen.io/screencore/pen/yLEpXVz Could you please give me another hint on how to get there? thanks in advance

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!

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.

thanks for reply. i almost get it done with this example. https://codepen.io/screencore/pen/QWxOBXx 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.

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