CODEWITHSUNDEEP
jquerycssgsapcard-flip
Amin Jafari
Amin Jafari

Reputation: 7207

TweenMax Flip Card

I just heard about GSAP today and played around with it for like 6 hours (which is AWESOME by the way!) I got all of it working except when I want to flip a card, the back side of it doesn't appear, I've searched all over the net seeking for a post having the same problem but came out with no luck.

By inspecting the elements I think the problem is that when the #testCard is rotated the children divs (#front and #back) don't get rotated and the browser thinks that it is the face of #front that is showing, but I have no idea how to solve it!

Take a look at This DEMO, click on the box and see the problem!

here's the code that I used for it:

HTML:

<div id="flipContainer">
    <div id="testCard">
        <div id="front">Front</div>
        <div id="back">Back</div>
    </div>
</div>

CSS:

#flipContainer{
    width:200px;
    height:100px;
    background-color:#EEE;
    position:absolute;
    top:100%;
    left:50px;
    margin-top:-150px;
    z-index:99999999999999999999999999999;}
#testCard{
    width:100%;
    height:100%;
    position:absolute;
    cursor:pointer;
    overflow:hidden;}
#testCard div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;}
#front{
    background-color:#F00;}
#back{
    background-color:#00F;}

jQuery: (JS)

TweenMax.set('#flipContainer, #testCard',{
    perspective:1000
    });
TweenMax.set($('#testCard'),{
    boxShadow:'0 0 10px #000',
    borderRadius:'10px',
    transformStyle:'preserve-3d',
    transformOrigin:'center center 50'
    });
TweenMax.set('#testCard div',{
    backfaceVisibility:'hidden'
    });
TweenMax.set('#back',{
    rotationY:-180
    });
TweenMax.set($('#flipContainer'),{
    borderRadius:'10px'
    });

var flipped=false;
$('#testCard').click(function(){
    if(!flipped){
        TweenMax.to($(this),1,{
            rotationY:180,
            onComplete:function(){
                flipped=true;
                }
            });
    }
    else{
        TweenMax.to($(this),1,{
            rotationY:0,
            onComplete:function(){
                flipped=false;
                }
            });
        }
    });

Upvotes: 3

Views: 2113

Answers (1)

Amin Jafari
Amin Jafari

Reputation: 7207

since nobody answered after hours of playing around with the problem I found out that the problem was because of a CSS attribute that I gave to #testCard, the overflow:hidden;, I removed it, and it worked as desired!

DEMO

Upvotes: 2

Related Questions