[https://greensock.com/forums/topic/29426-3d-spinwheel-with-scrolltrigger/3D Spinwheel with scrollTrigger]

Thanks @Cassie and @elegantseagulls!

 

I tried to put your snippets in the Pen, which Cassie posted but it won't work. It still rotates automatically and stops after a couple of seconds.

I don't know how to post my Pen in here again, could you please show me your solutions? That would be so nice  

 

Thanks!

[https://greensock.com/forums/topic/29426-3d-spinwheel-with-scrolltrigger/3D Spinwheel with scrollTrigger]

Wow thats amazing @Cassie thanks! I am not a pro yet, do you know how I can trigger this by scroll and not automated?  

 

Thank you so much in advance!

[https://greensock.com/forums/topic/29426-3d-spinwheel-with-scrolltrigger/3D Spinwheel with scrollTrigger]

Hi thank you so much first of all!

@elegantseagulls thats a good idea, but how do I code a cylinder? I knew that css can build a cube but I did not knew that you can also make a cylinder?  That would be the perfect solution for me as long as it's rotatable by scrolling!

 

Thanks!

[https://greensock.com/forums/topic/29426-3d-spinwheel-with-scrolltrigger/3D Spinwheel with scrollTrigger]

Hi community,

 

I would like to code a 3D spinning wheel like the date picker on the iphone. It should be working by scrolling, so I tried to build it with the gsap tools and I thought it would be the easiest to use the scrollTrigger. I think it is possible and I probably have done it way to complicated. In my codepen example I animated the elements wb-item-1 to wb-item-6. You can see that it does not look realistic and not like a wheel as it should be.  

 

I also attached an image to understand what I want to achieve. It does not have to look like the appleUI but I want a realistic tilt- and scale effect.

Maybe you could help me here.

Thank you in advance!!

See the Pen wveebwW by MarcelDiedrich (@MarcelDiedrich) on CodePen