Jump to content
Search Community

Trying to achieve cardflip effect on my menu

FrancoisH test
Moderator Tag

Go to solution Solved by Diaco,

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

Hello there,


As a beginner I'm i went into an issue early and I'm still unable to solve it.


Maybe can you help me with it. I'm trying to achieve a card flip effect with my navigation bar, here's a small example of what I try to achieve but I'm unable to make this working. It seems to be a z-index related issue.


I really hope you can help me achieving this effect.


Kind regards.


EDIT /// I tried at one point to achieve this effect with 2 menu div with all my buttons one over the second and it was working fine, but I needed to animate both object directly at the same time, which caused a lot of complicated handling of the animation.

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

Link to comment
Share on other sites

Hi FrancoisH  :)


yeah , You've gone the right way , but with adding z-index tween you can show both face in browser that doesn't support css3 transform , like ie9 

some thing like this :

TweenLite.set('#menu', {perspective:400});
TweenLite.set(".back", {rotationX:180});
TweenLite.set([".back",".front"], {backfaceVisibility:"hidden"});
var tl = new TimelineMax({repeat:-1,yoyo:true});
tl.to(".rotate", 2, {rotationX:-180, transformStyle:"preserve-3d"})
.set(".back", {zIndex:2},1)
.set(".front", {zIndex:1},1);
Link to comment
Share on other sites

I'm still trying to improve the thing.


Here's my example : http://www.francoish.net/test/


Feel free if you have any suggestion to improve the whole thing?




EDIT 1 // Don't look at the little bug on first load, I'll use HTML loader to load the site I think. Or maybe should I hide the logo and use .fromto to achieve the effect... maybe a better solution.


EDIT 2 // Solved the previous issue but not really happy with the code. Don't look at the colors, they're just for testing purpose of the rotation. Anyway if you have any suggestion to reduce CSS properties, improve the way I animate things, please feel free to speak. I think I've overdone that a bit ;)

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