Jump to content
Search Community

Flip effect from css3/jquery to gsap

markilfin test
Moderator Tag

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

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



transformPerspective Vs perspective






Varying degrees of transformPerspective



fun 3D glare thing



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

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.
  • Create New...