3d rounded carousel with gsap

[Mantrone 2 Likes (Newbie)]

Hi everyone.

I need to make a carousel like this. Honestly, I don't even know what to look for.

Any kind of help will be greatly appreciated.

 

Ty

 

[akapowl 5,494 Likes (Superhero)]

Hello @Mantrone

 

The awesome Tom Miller aka @creativeocean made one looking just like that.

 

That pen should serve as a pretty good starting point for you, trying to figure things out.

 

See the Pen mdROBXx by creativeocean (@creativeocean) on CodePen

 

 

Edit:

Oh, look, it's even the first pen on his profile/showcase on codepen 😅

 

https://codepen.io/creativeocean

 

[Mantrone 2 Likes (Newbie)]

Hi @akapowl

 

Thank you for your answer. This is a good starting point.

 

I almost implement it in my project. The problem now is that's not dynamic: If I decrease or increase the number of .img, the carousel won't readjust based on number of images.

 

Any ideas on how I could modify the code?

 

Ty

[OSUblake 18,536 Likes (Superhero)]

Hi Mantrone, 

 

Just from a quick glance at it, I think you might need to make some adjustments to the number 36 I see several times in the code. There are 10 images, so that's where the 36 comes. There are 30 degrees between each image. You'll probably have to figure out a new angle based on the number of images you are using, and adjust the code.

[Mantrone 2 Likes (Newbie)]

Ok,

somehow it's dynamic now. 

Now I've have another big problem:

I changed the initial code a bit by inserting images as tags and no longer as background images.

I insert also a link tag inside div .img that wrap img. This links inside every cards cause problems with drag. 

 

each time I drag to rotate the carousel from a link, it drags the link itself and not the carousel.

 

Then either added the attribute to the link draggable = "false" and it works, but now if I drag the carousel from an image, when the mouse is released, it changes the page (if I release the mouse over the same image). 

 

this is a logical behavior as for javascript it's not only a drag, but a click on the element.

 

do you have any other advice for me? I would very much appreciate any help.

 

Ty

[OSUblake 18,536 Likes (Superhero)]

45 minutes ago, Mantrone said:

this is a logical behavior as for javascript it's not only a drag, but a click on the element.

 

You'll probably have to call preventDefault on the event depending on what gesture it should be.

 

[Mantrone 2 Likes (Newbie)]

function drag(e){
  if (e.touches) e.clientX = e.touches[0].clientX;    

  
  gsap.set('.link-case', {pointerEvents: 'none'});
  gsap.to('.ring-cases', {
    rotationY: '-=' +( (Math.round(e.clientX)-xPos)%360 ),
    // onUpdate:()=>{ gsap.set('.img', { backgroundPosition:(i)=>getBgPos(i) }) }
  });
  
  xPos = Math.round(e.clientX);
}


function dragEnd(e){// eslint-disable-line
  window.removeEventListener('mousemove', drag);
  window.removeEventListener('touchmove', drag);
  gsap.set('.ring-cases', {cursor:'grab'});
  gsap.set('.link-case', {pointerEvents: 'auto'})
  
}

I don't know if it's the most elegant thing, but I did it by inserting in the drag function a tween of gsap to which I give pointerEvents: 'none' and to the dragEnd function pointerEvents: 'auto'.

 

ty