6 files changed, 110 insertions, 43 deletions

diff --git a/node_modules/components-data/feed-reader.json b/node_modules/components-data/feed-reader.json
index 6caf768d..aa9bf340 100644
--- a/node_modules/components-data/feed-reader.json
+++ b/node_modules/components-data/feed-reader.json
@@ -11,5 +11,9 @@
             "type": "string",
             "default": null
         }
-    ]
+    ],
+    "defaultStyles":  {
+        "width":"350px",
+        "height":"250px"
+    }
 }
\ No newline at end of file
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..0d5d7bb1 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
@@ -40,35 +40,39 @@ exports.FeedReader = Montage.create(Component, {
             this._fetchFeed();
         }
     },
-    
+
     // time in ms between slides
     interval: {value: 3, distinct: true},
 
     maxEntries: {value: 10, distinct: true},
-    
+
     entries: {value: null},
-    
+
     _feedDisplayMode: {value: null},
     feedDisplayMode: {
         get: function() {
             return this._feedDisplayMode;
         },
         set: function(value) {
-            this._feedDisplayMode = value;            
+
+            this.removeEntryAnimation();
+            this._feedDisplayMode = value;
+
+            this.addEntryAnimation();
         }
     },
-    
-    
+
+
     feedEntryTimer: {enumerable: false, value: null},
 
-    
+
     activeFeedEntry: {value: null},
     _activeIndex: {value: null},
     activeIndex: {
         get: function() {
             return this._activeIndex || 0;
         },
-        set: function(index) {                       
+        set: function(index) {
             if(this.entries) {
                 var max = this.entries.length-1;
                 if(index > max) {
@@ -77,17 +81,17 @@ exports.FeedReader = Montage.create(Component, {
                 if(index < 0) {
                     index = 0;
                 }
-                this._activeIndex = index;  
-                this.activeFeedEntry = this.entries[this._activeIndex];                             
+                this._activeIndex = index;
+                this.activeFeedEntry = this.entries[this._activeIndex];
             } else {
                 this._activeIndex = 0;
-            }            
+            }
         }
     },
 
     _fetchFeed: {
         value: function() {
-            
+
             var url = this.feedURL;
             var feed = new google.feeds.Feed(url);
             feed.setNumEntries(10);
@@ -96,38 +100,44 @@ exports.FeedReader = Montage.create(Component, {
             self.entries = [];