Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Storm Digital

Swipecube Navigation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 7
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

  • Like 6
Link to comment
Share on other sites

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.

  • Like 2
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.
×