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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.