AngularJS - Angular Velocity ex.

https://github.com/cgwyllie/angular-velocity

by gavinfoley

HTML

<div data-ng-app="myApp">
    <div data-ng-controller="MyCtrl">
        <ul data-ng-repeat="tweet in tweets track by $index"
            class="velocity-opposites-transition-slideLeftIn" data-velocity-opts="{ stagger: 100 }">
            <li>{{ tweet }}</li>
        </ul>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/css/foundation.min.css"> 
<link rel="stylesheet" href="//rawgit.com/minipai/ng-trans.css/master/ng-trans.min.css"> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script src="//rawgit.com/julianshapiro/velocity/master/jquery.velocity.min.js"></script>
<script src="//rawgit.com/julianshapiro/velocity/master/velocity.ui.js"></script> 

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script> 
<script src="//rawgit.com/cgwyllie/angular-velocity/master/angular-velocity.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular-animate.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script> 

<style>
li{
    list-style: none;
}

JavaScript

angular.module('myApp', ['ngAnimate', 'angular-velocity'])

.controller("MyCtrl", function($scope, $timeout, $http) {
    $scope.tweets = []; 
   
    $http.get("http://dev.gavinfoley.ie/apis/twitter/api/twitter")
    .then(function(response) {
        $scope.tweets = response.data.Tweets;
    });
    
    $timeout(function(){
        $scope.tweets = [];
    }, 5000);
});