4 files changed, 18 insertions, 8 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index ba6952aa..95a94b36 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -76,9 +76,17 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
 
     selectKeyframe:{
         value:function(){
+
+            if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){
+                var tweenID = this.parentComponent.tweenID;
+                var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent;
+                mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe();
+                return;
+            }
+
             this.isSelected=true;
             this.element.style.left = (this.position - 6) + "px";
-            this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty
+            this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
             this.parentComponent.selectTween();
         }
     },
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index c18d6eff..31ba8253 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -442,12 +442,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
             for (var i = 0; i < this.propTweens.length; i++) {
                 var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec);
-                // TODO - trackDur should be parseFloat rounded to significant digits
+                // trackDur should be parseFloat rounded to significant digits
                 var trackDur = parseInt(this.trackDuration);
                 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%";
                 var keyframePropertyString = " " + keyframePercent + " {";
                 for(var prop in this.propTweens[i].tweenData.tweenedProperties){
-                    keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop];
+                    keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop] + ";";
                 }
                 keyframePropertyString += "}";
                 keyframeString += keyframePropertyString;
@@ -469,7 +469,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
             this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue;
 
             this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty;
-            var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString;
+            var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.parentComponent.animationNamesString;
             var newAnimationNames = currentAnimationNameString + "," + this.animationName;
             var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration");
             var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration;
@@ -479,8 +479,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
             this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames;
 
             this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames);
-
             this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration);
+            this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "forwards");
             this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount);
 
             var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }";
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 3a8d1ff3..98989022 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -1039,16 +1039,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         value:function (tweenEvent) {
             this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
             this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
+            this.tweens[0].tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px";
+            this.tweens[0].tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px";
             var animationDuration = Math.round(this.trackDuration / 1000) + "s";
             this.animationName = this.animatedElement.classList[0] + "_PositionSize";
             this.animationNamesString = this.animationName;
             this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName);
             this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
+            this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "forwards");
             this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1);
+
             var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }";
 
             this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
-
             this.insertTween(tweenEvent.offsetX);
             this.isTrackAnimated = true;
         }
@@ -1062,7 +1065,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             // build the new keyframe string
             var keyframeString = "@-webkit-keyframes " + this.animationName + " {";
 
-            console.log(this.animationName);
+            //console.log(this.animationName);
 
             for (var i = 0; i < this.tweens.length; i++) {
                 var keyMill = parseInt(this.tweens[i].tweenData.keyFrameMillisec);
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 682a8619..2d4ae75d 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -206,7 +206,6 @@ var Tween = exports.Tween = Montage.create(Component, {
             if (event.detail.source && event.detail.source !== "tween") {
 
                 if(this.parentComponent.parentComponent.isSubproperty){
-                        console.log("setting style tween property")
                     this.setStyleTweenProperty(event.detail);
                 } else {
                     // check for correct element selection