2 files changed, 29 insertions, 9 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index a38ecb30..6066066a 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -730,7 +730,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];
             if(this.animatedElement!==undefined){
                 this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name");
+
+                // check for multiple animation names
+                var animationNameList = this.animationName.split(",");
+                if(animationNameList.length > 1){
+                    this.animationName = animationNameList[0];
+                    this.extractKeyframesFromRules(animationNameList);
+                }
+
                 this.animationNamesString = this.animationName;
+
+                // build tweens for this tracks's keyframe rule
                 if(this.animationName){
                     trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");
                     this.nextKeyframe = 0;
@@ -796,6 +806,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         }
     },
 
+    extractKeyframesFromRules:{
+        value:function(ruleNames){
+            //console.log(ruleNames);
+            for(var i in ruleNames){
+                console.log(ruleNames[i].replace(/^\s+|\s+$/g,""));
+                var currName = ruleNames[i].replace(/^\s+|\s+$/g,"");
+                var test = this.application.ninja.stylesController.getAnimationRuleWithName(currName, this.application.ninja.currentDocument._document);
+                console.log(test);
+            }
+        }
+    },
+
     addAnimationRuleToElement:{
         value:function (tweenEvent) {
             this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop;
diff --git a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css
index 57e4dce6..03d1cf8d 100644
--- a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css
+++ b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css
@@ -1,15 +1,13 @@
 @charset "UTF-8";
-
 /* <copyright>
  This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
  No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
-
 /* TimelineTrack.scss
  * Main SCSS file for TimelineTrack component, compiled by SASS into the file css/TimelineTrack.css.
  */
-/* line 16, ../scss/TimelineTrack.scss */
+/* line 22, ../scss/TimelineTrack.scss */
 .tracklane {
   height: 19px;
   width: 100%;
@@ -22,7 +20,7 @@
   overflow: hidden;
 }
 
-/* line 28, ../scss/TimelineTrack.scss */
+/* line 34, ../scss/TimelineTrack.scss */
 .keyframe {
   position: absolute;
   height: 16px;
@@ -30,7 +28,7 @@
   background-color: white;
 }
 
-/* line 36, ../scss/TimelineTrack.scss */
+/* line 42, ../scss/TimelineTrack.scss */
 .defaultSpan {
   position: absolute;
   height: 16px;
@@ -38,23 +36,23 @@
   background-color: white;
 }
 
-/* line 45, ../scss/TimelineTrack.scss */
+/* line 51, ../scss/TimelineTrack.scss */
 .tl_layertracks .content-position {
   height: 63px;
 }
 
-/* line 48, ../scss/TimelineTrack.scss */
+/* line 54, ../scss/TimelineTrack.scss */
 .tl_layertracks .content-transform {
   height: 106px;
 }
 
-/* line 52, ../scss/TimelineTrack.scss */
+/* line 58, ../scss/TimelineTrack.scss */
 .tl_layertracks .collapsible-content.collapsible-collapsed {
   overflow: hidden;
   height: 0px;
 }
 
-/* line 57, ../scss/TimelineTrack.scss */
+/* line 63, ../scss/TimelineTrack.scss */
 .tl_layertracks .collapsible-content .collapsible-label {
   height: 21px;
   background-color: #474747;