Jump to content
Search Community

3d rounded carousel with gsap

Mantrone test
Moderator Tag

Recommended Posts

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




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




  • Like 5
  • Thanks 1
Link to comment
Share on other sites

  • 1 month later...

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?




Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites


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.



Link to comment
Share on other sites

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'.





  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...