code0n

animation for this card folding using tweenjs

Recommended Posts

Not sure you'll ever get there with CSS, that looks like a 3D game where the vertices of the card are actually moving and the renderer works out the rest.

CSS transforms could get you close with trickery with how many elements you use to represent a card, but it'll never be great. Happy to be proved wrong but CSS transforms just don't work like that to do the stretching and transforming you see in the video.

Actually, maybe there is a way.

Use lots and lots of elements to define the fold area, then transform each one by an increasing amount, i.e. first one (closest to body of card) rotates and transforms only a little bit, each subsequent one after it (until you reach the corner) moves a little farther, and its additive so there would be a nice concise algorithm that could give you how much to move each piece. Once you have an algorithm just keep increasing the number of elements until you get something that is smooth enough. It won't be perfect but it might be good enough to work.

Share this post


Link to post
Share on other sites

HTML Code:

<div class="cardWrapper">

<div class="card">

<div class="cardFace front"><h1>front</h1></div>

<div class="cardFace back"><h1>back</h1></div>

</div>

</div>

 

<div class="cardWrapper">

<div class="card">

<div class="cardFace front"><h1>front</h1></div>

<div class="cardFace back"><h1>back</h1></div>

</div>

</div>

 

<div class="cardWrapper">

<div class="card">

<div class="cardFace front"><img src="https://s.cdpn.io/16327/logo_texture.jpg"></div>

<div class="cardFace back"><img src="https://s.cdpn.io/16327/logo_robust.jpg"></div>

</div>

</div>

 

<div class="cardWrapper">

<div class="card">

<div class="cardFace front"><h1>front</h1></div>

<div class="cardFace back"><h1>back</h1></div>

</div>

</div>

 

<div class="cardWrapper">

<div class="card">

<div class="cardFace front"><h1>front</h1></div>

<div class="cardFace back"><div class="moreInfo">This is just an example of how you can customize the content of any card face.</div></div>

</div>

</div>

 

CSS Code:

body {background-color: black;margin:20px; font-family:Arial, sans-serif;}

 

.cardWrapper{ width:200px;height:200px;position:relative; float:left;margin-right:10px;cursor:pointer; -webkit-font-smoothing:antialiased;}

.cardFace{position:absolute;width:200px;height:200px;overflow:hidden;}

.front{background-color:#333; }

.back{background-color:#333; }

.cardFace h1{margin:0px;font-size:30px;padding:10px 0px 10px 10px;border-bottom:solid 6px #aaa;border-top:solid 6px #aaa;background-color:black;color:white;}

.cardFace.back h1{border-color:#91e600;}

.moreInfo{padding:10px;color:white;line-height:24px;}

 

Tween js Code:

<script>

TweenLite.set(".cardWrapper", {perspective:800});

TweenLite.set(".card", {transformStyle:"preserve-3d"});

TweenLite.set(".back", {rotationY:-180});

TweenLite.set([".back", ".front"], {backfaceVisibility:"hidden"});

 

$(".cardWrapper").hover(

  function() {

    TweenLite.to($(this).find(".card"), 1.2, {rotationY:180, ease:Back.easeOut});

  },

  function() {

    TweenLite.to($(this).find(".card"), 1.2, {rotationY:0, ease:Back.easeOut}); 

  }

);

 

TweenMax.staggerTo($(".card"), 1, {rotationY:-180, repeat:1, yoyo:true}, 0.1);

</script>

 

 

Share this post


Link to post
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.