Angular Animation with GreenSock

by Dejan Vasic

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.2.0/animate.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng-app="mainApp" ng-controller="mainCtrl" class="container">
    <ul class="pagination">
        <li><a href="#" ng-click="setNumber(1)">1</a>

        </li>
        <li><a href="#" ng-click="setNumber(2)">2</a>

        </li>
        <li><a href="#" ng-click="setNumber(3)">3</a>

        </li>
    </ul>
    <div class="row">
        <div class="col-md-6">
            <div ng-show="isNumber(1)"><span ng-class="{bouncy : loading}">Animated Text</span> : Page 1</div>
            <div ng-show="isNumber(2)"><span class="faded">Animated Text</span> : Page 2</div>
            <div ng-show="isNumber(3)"><span class="bouncy">Animated Text</span> : Page 3</div>
        </div>
    </div>
</div>

JavaScript

var main = angular.module('mainApp', ['ngAnimate']);

main.controller('mainCtrl', function ($scope, $animate, $timeout) {
    var pages = [1, 2, 3];
    $scope.current = 1;
    $scope.isNumber = function (num) {
        return $scope.current === num;
    };
    $scope.setNumber = function (num) {
        $scope.current = num;
    };
    
    $scope.loading = true;
    $timeout(function(){
        $scope.loading = false;
        console.log($scope.loading);
    }, 1000);
    console.log($scope.loading);    
});

main.animation('.bouncy', function(){
    return {
        addClass : function(element, className, done){
            console.log(element);
        }
    }
});