Animations with AngularJS Example Two

<!DOCTYPE html>
<html ng-app="website">

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
    <script data-require="angular-animate@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular-animate.js"></script>
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    
    <!-- CSS Transition Example --> 
    <link rel="stylesheet" href="transitions.css" />
    
    <!-- CSS Keyframe Animation Example
    <link rel="stylesheet" href="animations.css" />
    -->
    <!-- JS Animation Example
    <script src="animations.js"></script>
     -->

  </head>

  <body ng-controller="MainCtrl">
    <div class="slider">
      <div ng-repeat="slide in slides" ng-hide="!isCurrentSlideIndex($index)" class="slide slide-animation">
        <img class="nonDraggableImage" ng-src="{{slide.bg}}" />
        <img class="nonDraggableImage avatar" ng-src="{{slide.avatar}}" />
        <h1 class="title">
          <span>{{slide.title}}</span>
        </h1>
        <h3 class="subtitle">
          <span>{{slide.subtitle}}</span>
        </h3>
      </div>
    </div>
    <div class="nav">
      <div ng-repeat="slide in slides" ng-class="{'active':isCurrentSlideIndex($index)}" ng-click="setCurrentSlideIndex($index)">
        <h3>{{slide.title}}</h3>
      </div>
    </div>
  </body>
</html>

angular.module('website', ['ngAnimate'])
    .controller('MainCtrl', function ($scope) {
        $scope.slides = [
            {bg: 'http://i.imgur.com/ETtFCDZ.jpg', avatar: 'http://i.imgur.com/a1bXufB.png', title: 'John Lindquist', subtitle: 'The Godfather'},
            {bg: 'http://i.imgur.com/TQObU5t.jpg', avatar: 'http://i.imgur.com/ypIHnAv.png', title: 'Joel Hooks', subtitle: 'The Hustler'},
            {bg: 'http://i.imgur.com/kVYo0Rh.jpg', avatar: 'http://i.imgur.com/n6j9wVo.png', title: 'Lukas Ruebbelke', subtitle: 'The Cleaner'}
        ];

        $scope.direction = 'left';
        $scope.currentIndex = 0;

        $scope.setCurrentSlideIndex = function (index) {
            $scope.direction = (index > $scope.currentIndex) ? 'left' : 'right';
            $scope.currentIndex = index;
        };

        $scope.isCurrentSlideIndex = function (index) {
            return $scope.currentIndex === index;
        };
    })
  ;

body {
    overflow: hidden;
    background-color: #000000;
    margin: 10px;
}

.slider {
    width: 800px;
    height: 400px;
    overflow: hidden;
    position: relative;
    background: #e6e6e6;
    border: 20px solid #FFF;
    margin-top: 20px;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
}

h1 > span, h3 > span {
    background-color: rgba(244, 249, 251, 0.80);
    line-height: 2;
    padding: 10px;
}

.slide > h1 {
    width: 400px;
    top: 100px;
}

.slide > h3 {
    width: 400px;
    top: 180px;
}

.slide > h1, .slide > img, .slide > h3 {
    position: absolute;
}

.nonDraggableImage {
    -webkit-user-drag: none;
}

.avatar {
    top: 80px;
    left: 300px;
}

/*---------------------------------------------------------
NAV
---------------------------------------------------------*/
.nav {
    width: 800px;
    display: table;
    table-layout: fixed;
    padding: 0px;
}

.nav div {
    display:table-cell;
    background-color: #FFFFFF;
    height: 48px;
    width: 33%;
    background-color: #D3D3D3;
    cursor: pointer;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border-top:1px solid #000000;
    border-right:1px solid #000000;
}

.nav div:first-child {
    width: 34%;
}

.nav div:last-child {
    border-right:1px solid #D3D3D3;
}

.nav .active div:last-child {
    border-right:1px solid #FFFFFF;
}

.nav h3 {
    width: 100%;
    text-align: center;
}

.nav .active {
    border-top:1px solid #FFFFFF;
    background-color: #FFFFFF;
}

Animations with AngularJS Example Two
==============

This is an example of an album controlled by tab navigation.

### CSS Transition Example ###
Uncomment ```transitions.css``` in the ```head``` tag to see this example.

### CSS Keyframe Animation Example ###
Uncomment ```animations.css``` in the ```head``` tag to see this example.

### JavaScript Animation Example ###
Uncomment ```animations.js``` in the ```head``` tag to see this example.


#Challenge#
1. Choose the animation you want to do and create a ```workshop.css``` or ```workshop.js``` file and add a reference to it in ```index.html```
2. Animate a single property in the file you created. Feel free to use the included files for reference.
3. Animate an additional property to make the animation more interesting

#Bonus#
Add in some kind of animation delay or sequencing to your animation.

Resources
========================

One Hungry Mind
http://onehungrymind.com/

Year of Moo
http://www.yearofmoo.com/

Greensock
http://www.greensock.com/

.slide-animation.ng-hide-remove,
.slide-animation.ng-hide-add {
  /* remember, the .hg-hide class is added to element
     when the active class is added causing it to appear
     as hidden. Therefore set the styling to display=block
     so that the hide animation is visible */
  display:block!important;
}

.slide-animation.ng-hide-add {
  -webkit-animation:0.5s hide;
  animation:0.5s hide;
}

@keyframes hide {
  from { opacity:1; }
  to { opacity:0; }
}

@-webkit-keyframes hide {
  from { opacity:1; }
  to { opacity:0; }
}

.slide-animation.ng-hide-remove {
  -webkit-animation:0.5s show;
  animation:0.5s show;
}

@keyframes show {
  from { opacity:0; }
  to { opacity:1; }
}

@-webkit-keyframes show {
  from { opacity:0; }
  to { opacity:1; }
}

angular.module('website')
    .animation('.slide-animation', function () {
        return {
            beforeAddClass: function (element, className, done) {
                if (className == 'ng-hide') {
                    var scope = element.scope(),
                        finishPoint = element.parent().width();

                    if(scope.direction !== 'right') finishPoint = -finishPoint;

                    TweenLite.to(element, 0.5, {left:finishPoint, ease: Ease.easeInOut, onComplete: done});
                }
                else {
                    done();
                }
            },
            removeClass: function (element, className, done) {
                if (className == 'ng-hide') {
                    var scope = element.scope(),
                        startPoint = element.parent().width(),
                        tl = new TimelineLite();

                    if(scope.direction === 'right') startPoint = -startPoint;

                    tl.fromTo(element, 0.5, { left: startPoint}, {left:0, ease: Ease.easeInOut, onComplete: done})
                        .fromTo(element.find('.title'), 0.5, { left: -200, alpha: 0}, {left:0, alpha:1, ease:Ease.easeInOut} )
                        .fromTo(element.find('.subtitle'), 0.5, { left: -200, alpha: 0}, {left:0, alpha:1, ease:Ease.easeInOut} )
                        .fromTo(element.find('.avatar'), 0.5, { top: element.parent().height(), alpha: 0}, {top:100, alpha:1, ease:Ease.easeInOut} );
                }
                else {
                    done();
                }
            }
        };
    })
  ;

.slide-animation.ng-hide-add,
.slide-animation.ng-hide-remove {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;

  /* remember to add this */
  display:block!important;
  opacity:1;
}
.slide-animation.ng-hide {
  opacity:0;
}