Using draggable on 3D object the mouse-direction reverses

[fionchadd]

Hi there, 

 

I'm trying to recreate this effect 

See the Pen d660d22ce42eb5bc32f17b22e695f5a4 by fionchadd (@fionchadd) on CodePen

 using GSAP so I can take advantage of the inertia effect and the nicer movement. 

 

I am almost there but I'm struggling with the up- and down- movement (rotationX). It works well when the front of the packshot is visible, but when the back is visible the mouse movements seem to be reversed, and scrolling down angles the packshot up rather than down. 

 

I'm not sure what to do about this because I'm not entirely sure why it's happening - I was hoping you might be able to explain what's going on, in the hope that that might help me solve the issue! 

 

Thanks

 

Hannah

See the Pen 74ed359c0d50969b634250cd2a3d67d9 by fionchadd (@fionchadd) on CodePen

[OSUblake]

Hi fionchadd,

 

Draggable provides a bunch of properties that you might want to check out in the docs, like deltaX, deltaY, pointerX, and pointerY.

 

So you have the right idea using a proxy to control the movement, but I would create some animations with GSAP and then manipulate the progress values of those animations kind of like this.

 

See the Pen GRyomXX by GreenSock (@GreenSock) on CodePen

 

[fionchadd]

Hi Blake, 

 

Ahh this is great, thank-you, I did try manipulating timeline progress but I couldn't work out how to make that work.

 

It seems like the same issue is happening as in my initial pen though - when the purple side is visible, dragging it down tilts it back and dragging up tilts it forward, whereas when the orange side is visible, dragging down tilts it forward and dragging up tilts it back (which is what I want). Is there a way to have the same Y-rotation behaviour regardless of the X-rotation? 

 

Thanks!

Hannah

[fionchadd]

I have answered my own question with help from this pen: 

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

 

 

My final version is here: 

See the Pen 5d8f50c908370bc3c8681efcaea6d9dc by fionchadd (@fionchadd) on CodePen

 

 

Thanks so much for your help!