Swipecube Navigation

[Niek Roemahlewang 2 Likes (Newbie)]

Hi all,

 

Recently I made this 3D cube and I can't seem to get the navigation to work properly:

See the Pen qJYYjM by stormdigital (@stormdigital) on CodePen

 

I used this example of Chris Gannon: https://codepen.io/GreenSock/pen/3ff3af968fb3356423998050b0ae1d42?editors=0010 to create the cube and interaction.

 

Dragging works fine with snapping, but when you click on the navigation buttons while the cube is tweening, 90 degrees are added, so the cube isn't 'snapping' anymore and it look likes the cube hasn't turned all the way.

I've added a check to prevent this, but still no luck.

Is there a way to disable the click while the cube is tweening? Or should I use some sort of 'snap' to allow the cube to turn only by 90 degrees.

 

Any help is very much appreciated!

 

 

 

See the Pen qJYYjM by stormdigital (@stormdigital) on CodePen

[elegantseagulls 209 Likes (Specialist)]

My suggestion would be to use a 'snap'. You can get your current X position by using `this.x` in your `onCubeDrag()` function. From there  you should be able to math the difference for what the 90deg snap should be. If I have time this morning I'll see if I can fork your pen and dive into the details a little deeper.

[Niek Roemahlewang 2 Likes (Newbie)]

Thank you for your reply @elegantseagulls!

I managed to get the 'this.x position' while dragging but wasn't able to connect it to the nav buttons.

Please let me know when you've managed to create the pen. That would be very helpful.

[Victor Work 152 Likes (Specialist)]

On 10/19/2018 at 8:45 AM, Niek Roemahlewang said:

Is there a way to disable the click while the cube is tweening?

 

Hello, @Niek Roemahlewang

Have you tried to take a look at this?
https://greensock.com/docs/Utilities/Draggable/isThrowing

[elegantseagulls 209 Likes (Specialist)]

Hi @Niek Roemahlewang

 

I finally had time to look at the CodePen in more depth. The 'gotcha' for me was that the prev/next button tweens needed a fromTo tween to animate from current x position to the snapped x position. Hope this is helpful for your learning/understanding!

 

See the Pen OBBJBx?editors=0011 by elegantseagulls (@elegantseagulls) on CodePen

 

[Niek Roemahlewang 2 Likes (Newbie)]

Hi @elegantseagulls,

 

This works! Thank you very much for taking the time to help.

The cube was definitely a good project to learn and I understand the draggable option a bit more now.