Jump to content

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

Slider with perspective cube turning on its head

Recommended Posts

Hi everyone,


I have been playing around with my slider and it works as it is supposed to. But one thing that I cannot figure out is how do I prevent the "feature" part on the upper right corner to turn on its head after clicking it more than three times? It is supposed to start over again with the first feature. I have tried so many things but do not know how I could make the feature start again. 


I have been trying to understand Jonathan's pen but my JS is not at that level yet. :-(


See the Pen XVPvZq by jonathan (@jonathan) on CodePen

Hopefully someone can help.




See the Pen ywvOOb by lukenicktap (@lukenicktap) on CodePen

Link to comment
Share on other sites

I can pick this apart a little later .. but one thing I see off the bat is that the logic (somewhere) is doubling the faces. If you have 3, it takes 6 clicks to get around to the start ... 4 faces takes 8 clicks ... etc. That is why your seeing the backfaces of the others (that and CSS backface-visibility).

  • Like 2
Link to comment
Share on other sites

Thanks, I appreciate it.  I noticed that about the clicks, too. And I have no idea why. I kept the backface-visibility on so the issue is more obvious. 

Link to comment
Share on other sites

Doesn't anyone have an idea or could hint the direction I would need to go? I am really stuck right now. Thanks

Link to comment
Share on other sites

I spent a few minutes looking at your code and didn't get very far.

The purpose of these forums is to help people with questions related to the GSAP API.

As you can probably imagine, it takes quite a bit of time to look at 200 lines of code and figure out what its supposed to do... and even more time to try to figure out what isn't working.


I've never looked at Jonathan's code before, and even though it is working great... it would take awhile to study.


Since you have 90% of things working and the only problem is the rendering of that "cube", I would suggest you create a new pen and just create a very simple demo that has that cube built the way you want it and try to animate it with a timeline (without any human interaction). 


I think if you come back with just a cube and a few lines of timeline code to animate and there is still a problem, we will have a better chance to help you.



  • Like 2
Link to comment
Share on other sites

Thanks Carl and I am really sorry. I thought (or was hoping) this would be an obvious issue (related to GSAP) that I am just skilled enough to understand. But this explains why I did not get any response. I will go back to the drawing board with a simple demo  and just concentrate on the cube as you suggested. Thank you. 

  • Like 1
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.