Jump to content
GreenSock

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

Trying to achieve cardflip effect on my menu

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

I think I found the answer myself but it's not perfectly working as I would. I thought I could animate the container rather than animating both <a> inside it but I was wrong I think...

 

I tried this on codepen : 

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

 

I changed my animation to animate both parts with relative positioning.

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?

 

Thanks.

 

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