AngularJS animations and TweenLite make it really easy to create cool 3d effects in your application.
<!DOCTYPE html> <html ng-app="helloGreensock"> <head lang="en"> <meta charset="UTF-8"> <title>Hello Greensock!</title> <link rel="stylesheet" href="css/greensock.css"/> </head> <body ng-controller="MainCtrl"> <question class="cardWrapper answer-animation" ng-class="{'answer':showAnswer}" ng-repeat="q in questions" ng-mouseenter="showAnswer = true" ng-mouseleave="showAnswer = false"> <div class="card"> <div class="cardFace front"><img height="200px"; ng-src="{{q.question}}"/></div> <div class="cardFace back">><img height="200px"; ng-src="{{q.answer}}"/></div> </div> </question> </body> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js"></script> <script src="js/greensock.3d.js"></script> </html>
var app = angular.module('helloGreensock', ['ngAnimate']); app.controller('MainCtrl', function ($scope) { $scope.questions = [ {question: 'img/1480.jpg', answer: 'img/30.jpg'}, {question: 'img/7081.jpg', answer: 'img/70.jpg'} ]; }); app.directive('question', function () { var controller = function ($scope) { $scope.showAnswer = false; }; return { restrict: 'E', scope: true, controller: controller } }); app.animation('.answer-animation', function () { TweenLite.set('.cardWrapper', {perspective: 400}); TweenLite.set('.card', {transformStyle: 'preserve-3d'}); TweenLite.set('.back', {rotationY: -180}); TweenLite.set(['.back', '.front'], {backfaceVisibility: 'hidden'}); return { beforeAddClass: function (element, className, done) { if (className == 'answer') { TweenLite.to(element.find('.card'), 2, {rotationY:180, ease:Back.easeOut, onComplete:done}); } else { done(); } }, beforeRemoveClass: function (element, className, done) { if (className == 'answer') { TweenLite.to(element.find('.card'), 1.2, {rotationY:0, ease:Back.easeOut, onComplete:done}); } else { done(); } } }; });
