3D Card Flip

  • Adobe Edge Animate - May 2, 2016

Simulate an object spinning from front to back, this example show playing card being flipped over.


First you will need to add an external js library, go to the scripts control panel and add: 

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.3/TweenMax.min.js

This simply deals with a large part of motion code so you dont have to.

Now on your stage create a symbol called "Card" then inside this symbol but 2 element in your timeline and call the "Front" and "Back"

Next add the following code to your document.compositionReady panel:

var front = sym.getSymbol("Card").$("Front");
var back = sym.getSymbol("Card").$("Back");

TweenMax.set(front, {opacity:0});
TweenMax.set(front, {rotationY:90});

TweenLite.set(back, {transformPerspective:800});
TweenLite.to(back, 1, {rotationY:90, ease:Power2.easeIn, onComplete: flip});

function flip() {
  TweenLite.set(front, {transformPerspective:-800});
  TweenLite.to(front, 0, {opacity:1, delay: 0});
  TweenLite.to(front, 2, {rotationY:0, ease:Power2.easeOut});
}

 

In addition if you would like you card to spin back again after say 2 seconds use the following adjusted code:

var front = sym.getSymbol("Card2").$("Front");
var back = sym.getSymbol("Card2").$("Back");
TweenMax.set(front, {opacity:0});
TweenMax.set(front, {rotationY:90});
TweenLite.set(back, {transformPerspective:800});
TweenLite.to(back, 1, {rotationY:90, ease:Power2.easeIn, onComplete: fullFlip});
	
function fullFlip() {
  TweenLite.set(front, {transformPerspective:-800});
  TweenLite.to(front, 0, {opacity:1, delay: 0});
  TweenLite.to(front, 1, {rotationY:0, onComplete: holdCard});
}
function holdCard() {
  setTimeout(fullFlipBack, 2000);
}
function fullFlipBack() {
  TweenMax.set(back, {rotationY:90});
  TweenLite.set(front, {transformPerspective:800});
  TweenLite.to(front, 1, {rotationY:90, ease:Power2.easeIn, onComplete: fullFlipEnd});
}
function fullFlipEnd() {
  TweenLite.set(back, {transformPerspective:-800});
  TweenLite.to(back, 1, {rotationY:0});
}

 

Download the files below to view the working example.

Download Files

Comments