Flip effect from css3/jquery to gsap

[markilfin]

I have css3/jquery demo( codepen is attached ) which I want to convert to gsap platform. I have built this demo long ago( maybe an year ago ), so it's not very clean and has been built with not the best practices. But until recently worked fine in all major browsers. But after last update, it doesn't work in FF ( v. 35.0.1 ).

So maybe I can somehow convert it to gsap. But I do not know even where to start. Maybe somebody can help me? Or even you can point me where to start?

 

Any help would be greatly appreciated!

Thank you!

See the Pen emeaXz by anon (@anon) on CodePen

[Carl]

Dealing with 3D is pretty easy with GSAP.

These demos below will introduce you to some of the core concepts

 

Very basic 3D effect

http://codepen.io/GreenSock/pen/yelzn

 

transformPerspective Vs perspective

http://codepen.io/GreenSock/pen/vGahu/

 

transformOrigin

http://codepen.io/GreenSock/pen/Ltfdb/

 

Varying degrees of transformPerspective

http://codepen.io/GreenSock/pen/GLjnd/

 

fun 3D glare thing

http://codepen.io/GreenSock/pen/gLJvz

 

If you are totally new to GSAP you should really start with our new Getting Started video:  http://greensock.com/get-started-js

 

In your demo, you really just need GSAP to do 1 thing, create a tween of a certain element using rotationX, like

TweenLite.to(nextCard, 1, {rotationX:180, transformOrigin:"center bottom"});

The majority of the heavy lifting though is in finding out which item to rotate and whatever DOM manipulation is going on.

Unfortunately I can't tackle wading through the string of addClass(), removeClass() stuff. 

 

I'd strongly recommend you get comfortable with the GSAP API first.

 

let us know if you need any help with that.

[Jonathan]

Very very cool Carl, i was looking for those GSAP demo codepen links above. Great examples!