Draggable with 3D rotation

[al 2 Likes (Newbie)]

I am lost.

 

 

I researched how to do this but really couldn't come up with anything specific for doing this with Draggable (and ThrowProps). I feel like I am missing something obvious here.

 

How can I make the left-hand side box flip (with rotationX) instead of spin:

http://codepen.io/andrewleith/debug/oeHzn/

 

I tried (poorly) with the right-hand box box.

 

 

Can anyone point me in the right direction?

 

Thanks,

Andrew

 

See the Pen oeHzn by andrewleith (@andrewleith) on CodePen

[Carl 9,066 Likes (Superhero)]

Draggable doesn't handle 3D rotation out of the box.

What you can do is create an invisible proxy Draggable that uses its position to set the rotationX of another element. 

In the CodePen demo below drag the blue (proxy) div down to spin the grey div (target)

 

http://codepen.io/GreenSock/pen/nHpec

[al 2 Likes (Newbie)]

Wow Carl, thanks. I don't think I ever would have gotten to that on my own.

 

I'll certainly use this as a basis for what I'm trying to do. I'm a bit concerned that the proxy is going to get in the way of other clickable objects behind it, but I'll deal with that when I get there.

 

Thanks again,

Andrew

[jamiejefferson 1,185 Likes (Superhero)]

Here's a modification that uses an empty proxy element and a trigger so that conflict won't occur

 

See the Pen kFhKE by jamiejefferson (@jamiejefferson) on CodePen

[al 2 Likes (Newbie)]

Awesome, thanks Jamie.