diff --git a/infoscreen/static/css/infoscreen.css b/infoscreen/static/css/infoscreen.css
index 1df6617..ef39121 100644
--- a/infoscreen/static/css/infoscreen.css
+++ b/infoscreen/static/css/infoscreen.css
@@ -18,4 +18,20 @@
 	display: block;
     margin-left: auto;
     margin-right: auto;
-}
\ No newline at end of file
+}
+
+.swap-animation.ng-enter, .swap-animation.ng-leave {
+  transition:0.5s linear all;
+}
+.swap-animation.ng-enter {
+  opacity:0;
+}
+.swap-animation.ng-enter-active {
+  opacity:1;
+}
+.swap-animation.ng-leave {
+  opacity:1;
+}
+.swap-animation.ng-leave-active {
+  opacity:0;
+}
diff --git a/infoscreen/static/js/infoscreen_controllers.js b/infoscreen/static/js/infoscreen_controllers.js
index 9ecfbc1..75dab24 100644
--- a/infoscreen/static/js/infoscreen_controllers.js
+++ b/infoscreen/static/js/infoscreen_controllers.js
@@ -1,9 +1,9 @@
-var app = angular.module('infoApp', []);
+var app = angular.module('infoApp', ['ngAnimate']);
 
 
 
-app.controller('infoscreen_main', function($scope, $http,$timeout){
-    var index = -1;
+app.controller('infoscreen_main', function($scope,$timeout){
+    $scope.index = -1;
     var templates = [
         {
             template: "/static/html/test1.html?img=siklogo",
@@ -17,8 +17,8 @@ app.controller('infoscreen_main', function($scope, $http,$timeout){
         },
     ];
     $scope.next = function(){
-        index = (index + 1) % templates.length;
-        $scope.active = templates[index];
+        $scope.index = ($scope.index + 1) % templates.length;
+        $scope.active = templates[$scope.index];
         $timeout($scope.next,5000);
     }
     $scope.next()
diff --git a/infoscreen/templates/infoscreen_index.html b/infoscreen/templates/infoscreen_index.html
index 3ac5a3b..ae55891 100644
--- a/infoscreen/templates/infoscreen_index.html
+++ b/infoscreen/templates/infoscreen_index.html
@@ -7,6 +7,7 @@
         <title>Infoscreen</title>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
+        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
         <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
@@ -15,8 +16,10 @@
         <script src="/static/js/infoscreen_controllers.js"></script>
     </head>
     <body>
-        <div ng-controller="infoscreen_main" >
-            <div id="infocontent" ng-include="active.template" onload="active.onload()"></div>
+        <div class="container ng-scope" ng-controller="infoscreen_main" >
+            <div ng-animate-swap="index" class="cell swap-animation">
+                <div id="infocontent" ng-include="active.template" onload="active.onload()"></div>
+            </div>
         </div>
     </body>
 </html>
