Jump to content
GreenSock

Matt K

3D Carousel on X and Z Axis

Go to solution Solved by GreenSock,

Recommended Posts

Hello all,

 

I'm trying to create a 3D carousel for a project.  I found this post and tried to adapt the solution for my purpose, but I can't get it to rotate or put the space between the cards.  I feel like I may not have all the required files linked.

 

 

I would like to have it autofocus on one slide at a time, but maybe incorporate another plugin too so you can grab and drag around to different processes.  Adding the slide number above each slide would be nice to have too, but I haven't looked into that yet.  Another option could be auto play the animation, pausing on hover, and then autofocusing on a slide. I'd prefer to have it animating continuously and then pause, but I don't know how smooth it could be when it goes to pause or autofocus on the slide.

 

This pen is similar to what I'm trying to accomplish.

See the Pen YwVadY by jonathan (@jonathan) on CodePen

 

This is how I'm trying to get the rotation to be on the X and Z axis.  Any suggestions?

3d-rotate.JPG.d71ebf1c10252994d0ffed1c960c7c41.JPG

 

See the Pen zYEmKav by mattk1500 (@mattk1500) on CodePen

Link to comment
Share on other sites

Hi @Matt K. Thanks for being a Club GreenSock member!

 

We can't really provide "build-to-order" solutions here, but we're happy to answer any GSAP-specific questions. Here's a fork of your demo that does what I assume you wanted in terms of positioning: 

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

 

Grabbing and dragging is a whole different challenge. Again, we just don't have the resources to build custom solutions for all the questions that get posted in these forums, but you should certainly be able to use Draggable to make the whole thing draggable, though you'll likely need to use a proxy element for that because you're dealing with 3D space/rotation rather than 2D x/y dragging. 

  • Like 3
Link to comment
Share on other sites

I understand.  Yes, thank you for your help!  I should be able to add that from your solution.   Regarding a proxy element, are you referring to wrapping another div around the whole section to link to, or something else?  

Link to comment
Share on other sites

  • Solution
4 minutes ago, Matt K said:

Regarding a proxy element, are you referring to wrapping another div around the whole section to link to, or something else?  

Alright, you got me curious and I love a challenge, so I whipped up a draggable demo that even uses inertia and is configurable: 

 

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

 

Is that kinda what you were looking for?  :)

  • Like 3
Link to comment
Share on other sites

Yes, I believe it is!  Thank you!!!  I see the createElement code. Is that wrapping the whole container in the div or each card?  It looks like it's creating one around everything, if I understand it correctly.

Link to comment
Share on other sites

Actually, I see it's wrapping around the body.  Now I'm just trying to edit it to be draggable only in the area of the cards.  With it on my webpage it covers the whole viewport, since it's wrapping around the body, but that makes it where I can't scroll on mobile on the website.  

Link to comment
Share on other sites

32 minutes ago, Matt K said:

Actually, I see it's wrapping around the body.  Now I'm just trying to edit it to be draggable only in the area of the cards.  With it on my webpage it covers the whole viewport, since it's wrapping around the body, but that makes it where I can't scroll on mobile on the website.  

That document.createElement("div") is just a dummy element that does nothing meaningful. It doesn't wrap anything. It doesn't even get added to the DOM. It's just that Draggable needs an element to drag, but we're using a "trigger" to tell Draggable to add its touchstart/pointerdown/mousedown listeners to the ".demoWrapper" instead.  

 

I just updated the demo with some notes and I set allowNativeTouchScrolling: true and set the trigger to be the .demoWrapper: 

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

 

Better? 

  • Like 1
Link to comment
Share on other sites

Oh, okay.  I understand.  I was trying getElementByID or getElementsByClassName instead of just the ".creative-pro" class itself and wrapping everything in a div.  Yes, it's perfect!  Thank you!  I really do appreciate it!  On the website version I also had to set the transformStyle to "preserve-3d" to have the cards circle to the back.  Perhaps Codepen has a feature that sets that or something similar.

 

transform.JPG.799c9f8d1d9c16400851a09d157588a5.JPG

 

 

Link to comment
Share on other sites

9 minutes ago, Matt K said:

On the website version I also had to set the transformStyle to "preserve-3d" to have the cards circle to the back.  Perhaps Codepen has a feature that sets that or something similar.

I just set that in the CSS in my version. It's fine to do either way (via GSAP or CSS). 

 

Glad it helped!

  • Like 1
Link to comment
Share on other sites

Oh, yeah.  That's true.   Okay, great!  Thanks again!

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