Jump to content
Search Community

Card flip example

mimeartist 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

Apologies if this is a little #lazyweb but been hunting everywhere to do a card flip type interaction, whereby you click a div and it flips around to show other content (text) on the reverse and then you can click back... I've been trying a number of jQuery plug-ins such as flip, and flippy... when someone suggested using gasp...which I'm already using...

 

However I'm not sure how to implement the content on the back other than perhaps flipping the div through 90 degrees and then hiing and showing a new div... but not sure if this is the best approach?

 

I've started with a flip that goes through 180 degrees, but am struggling straight of with it half disappearing behind the background image of the site, I'm guessing this is because I'm moving through z-levels from the rotation... anyway to solve this? I've tried upping the z-index of the div I'm rotating but this doesn't work... guess it's going through negative z-indexs

 

Any examples you've seen would be great... If this is the wrong place to post this; I apologise!

 

James

Link to comment
Share on other sites

Hello mimeartist_payed! , Welcome to the GreenSock Forums

 

check out this Forum Topic: Card Flipping with TweenMax and CSS

 

Also here is 2 examples from Rodrigo:

 

See the Pen vjGxH by rhernando (@rhernando) on CodePen

See the Pen IJfAy by rhernando (@rhernando) on CodePen

 

And you can check out this search for card flip in the Forum Search above:

 

http://forums.greensock.com/index.php?app=core&module=search&do=search&fromMainBar=1

 

Here are 2  links to just learn the principles of the card flip in CSS and then you can convert it to GSAP:

 

http://davidwalsh.name/css-flip

http://css3.bradshawenterprises.com/flip/

 

Hope this helps? :)

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

Hi chb382,

 

I think you would have to restructure your CSS quite a bit to make that fully responsive while maintaining the proper aspect ratio.

There my be someone around here that has a quick fix for you but we have to keep our support very focused on the GSAP API.

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