Animation for the Feed reader

3 files changed, 71 insertions, 13 deletions

diff --git a/node_modules/montage/examples/feed-reader/main.reel/main.html b/node_modules/montage/examples/feed-reader/main.reel/main.html
index 50bac601..1313219f 100644
--- a/node_modules/montage/examples/feed-reader/main.reel/main.html
+++ b/node_modules/montage/examples/feed-reader/main.reel/main.html
@@ -45,8 +45,8 @@
         "name": "FeedReader",
         "properties": {
             "element": {"#": "feed-reader"},
-            "feedDisplayMode": "timed",
-            "interval": "5"
+            "feedDisplayMode": "animation",
+            "interval": "3"
         }
     },
     
@@ -170,6 +170,7 @@
             margin-top: 10px;
         }
         
+        
         /*
         .feed-reader .feed-entry {
             visibility:hidden;
@@ -182,7 +183,42 @@
             transition-delay:0s;
         }
         */
+        
+        @-webkit-keyframes rotateWithAlphaKeyframes {
+            0% {
+                    opacity: 0;
+                    -webkit-transform: perspective(1000) rotateY(95deg);
+            }
+            1% {
+                    opacity: 0;
+                    -webkit-transform: perspective(1000) rotateY(-90deg);
+            }
+            15% {
+                    opacity: 1;
+                    -webkit-transform: perspective(1000) rotateY(0deg);
+            }
+            85% {
+                    opacity: 1;
+                    -webkit-transform: perspective(1000) rotateY(0deg);
+            }
+            100% {
+                    opacity: 0;
+                    -webkit-transform: perspective(1000) rotateY(95deg);
+            }
+        }
+        
+        .rotateWithAlphaAnimation {
+                -webkit-animation-name: rotateWithAlphaKeyframes;
+                -webkit-animation-duration: 5s;
+                -webkit-animation-iteration-count: infinite;
+                -webkit-animation-direction: normal;
+                -webkit-animation-timing-function: ease-out;
+                -webkit-transform-origin: 200% 50%;
+                -webkit-transform-style: preserve-3d;
+                -webkit-transform: perspective(1000);
+        }
 
+    
     </style>
 
 
@@ -201,7 +237,7 @@
                         <input type="button" id="btn-go" class="btn primary" value="OK"></button>
                     </form>
                 </div>
-                <div class="feed-reader" id="feed-reader"></div>
+                <div class="feed-reader rotateWithAlphaAnimation" id="feed-reader" ></div>
             </section>
             
             <section class="map-container">
diff --git a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html
index e5251e0a..21f3d4ee 100644
--- a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html
+++ b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html
@@ -52,7 +52,9 @@
 
     <style>
        div.feed-reader  {
-           padding: 10px;          
+           padding: 10px; 
+           height: 250px;
+           width: 350px;        
        }
        
        .feed-entry {
diff --git a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js
index 8fd9ae22..49ce6523 100644
--- a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js
+++ b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js
@@ -96,11 +96,12 @@ exports.FeedReader = Montage.create(Component, {
             self.entries = [];
 
             feed.load(function(result) {
-                //self.removeEntryAnimation();
+                self.removeEntryAnimation();
                 if(result.error) {
                     self.entries = [];
                 } else {
-                    //console.log('entries: ', result.feed.entries);                    
+                    //console.log('entries: ', result.feed.entries);   
+                    self.addEntryAnimation();                 
                     self.entries = result.feed.entries;
                     this._activeIndex = 0;
                 }
@@ -113,8 +114,14 @@ exports.FeedReader = Montage.create(Component, {
     addEntryAnimation: {
         value: function() {
             var self = this;
-            if("animation" == this.feedDisplayMode) {                
-                this.element.addEventListener('animationend', this);
+            if("animation" == this.feedDisplayMode) {
+                                
+                this.element.addEventListener('webkitAnimationStart', this);
+                this.element.addEventListener('webkitAnimationIteration', this);
+                this.element.addEventListener('webkitAnimationEnd', this);
+                
+                
+                
             } else {
                 // timer                
                 this.feedEntryTimer = setInterval(function() {
@@ -127,7 +134,9 @@ exports.FeedReader = Montage.create(Component, {
     removeEntryAnimation: {
         value: function() {
             if("animation" == this.feedDisplayMode) {                
-                this.element.removeEventListener('animationend', this);
+                this.element.removeEventListener('webkitAnimationStart', this);
+                this.element.removeEventListener('webkitAnimationIteration', this);
+                this.element.removeEventListener('webkitAnimationEnd', this);
             } else {
                 if(this.feedEntryTimer) {
                     window.clearInterval(this.feedEntryTimer);
@@ -136,16 +145,27 @@ exports.FeedReader = Montage.create(Component, {
         }
     },
     
-    handleAnimationend: {
+    handleWebkitAnimationStart: {
         value: function() {
-            console.log('animation end');
-            this.activeIndex = this.activeIndex + 1;
+            console.log('animation start');
         }
     },
     
+    handleWebkitAnimationIteration: {
+        value: function() {
+           console.log('animation iteration');
+           this.activeIndex = this.activeIndex + 1;
+       }
+   },
+   
+   handleWebkitAnimationEnd: {
+       value: function() {
+           console.log('animation end');
+       }
+    },
+    
     prepareForDraw: {
         value: function() {
-            this.addEntryAnimation();
         }
     },