Jump to content
GreenSock

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

Flip effect from css3/jquery to gsap

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

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