Slider with perspective cube turning on its head

[LukeNick]

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.

Thanks

Lucas
 

 

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

[Shaun Gorneau]

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).

[LukeNick]

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. 

[LukeNick]

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

[Carl]

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.

 

 

[LukeNick]

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.