4 files changed, 64 insertions, 1 deletions

diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index b3ac9ddb..9b2fa618 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -105,6 +105,18 @@ exports.ShapesController = Montage.create(CanvasController, {
                 case "editFillMaterial":
                     NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()});
                     break;
+                case "animate":
+                    if(value)
+                    {
+                        el.elementModel.shapeModel.animate = true;
+                        el.elementModel.shapeModel.GLWorld.restartRenderLoop();
+                    }
+                    else
+                    {
+                        el.elementModel.shapeModel.animate = false;
+                        el.elementModel.shapeModel.GLWorld._canvas.task.stop();
+                    }
+                    break;
                 default:
                     CanvasController.setProperty(el, p, value);
             }
@@ -123,6 +135,7 @@ exports.ShapesController = Montage.create(CanvasController, {
                 case "border":
                 case "background":
                 case "useWebGl":
+                case "animate":
                     return this.getShapeProperty(el, p);
                 case "strokeMaterial":
                 case "fillMaterial":
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index 53fec3be..56337124 100755
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -393,6 +393,16 @@ exports.PiData = Montage.create( Montage, {
                     ],
                     [
                         {
+                            type: "checkbox",
+                            id: "animate",
+                            prop: "animate",
+                            defaultValue: true,
+                            value: "Animate",
+                            checked: true
+                        }
+                    ],
+                    [
+                        {
                             type: "dropdown",
                             id:   "strokeMaterial",
                             prop:   "strokeMaterial",
@@ -486,6 +496,16 @@ exports.PiData = Montage.create( Montage, {
                     ],
                     [
                         {
+                            type: "checkbox",
+                            id: "animate",
+                            prop: "animate",
+                            defaultValue: true,
+                            value: "Animate",
+                            checked: true
+                        }
+                    ],
+                    [
+                        {
                             type: "dropdown",
                             id:   "strokeMaterial",
                             prop:   "strokeMaterial",
@@ -580,6 +600,16 @@ exports.PiData = Montage.create( Montage, {
                     ],
                     [
                         {
+                            type: "checkbox",
+                            id: "animate",
+                            prop: "animate",
+                            defaultValue: true,
+                            value: "Animate",
+                            checked: true
+                        }
+                    ],
+                    [
+                        {
                             type: "dropdown",
                             id:   "strokeMaterial",
                             prop:   "strokeMaterial",
diff --git a/js/models/shape-model.js b/js/models/shape-model.js
index 58a88fd0..ea8c2cfc 100755
--- a/js/models/shape-model.js
+++ b/js/models/shape-model.js
@@ -10,7 +10,8 @@ var Montage = require("montage/core/core").Montage,
 exports.ShapeModel = Montage.create(Component, {
 
     shapeCount:             { value: 0 },
-    useWebGl:           { value: false },
+    useWebGl:               { value: false },
+    animate:                { value: true },
 
     GLWorld:                { value: null },
     GLGeomObj:              { value: null },
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 2a6e49f7..7db2a82c 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -166,6 +166,25 @@ exports.Ninja = Montage.create(Component, {
             this.currentDocument.documentRoot.elementModel.controller.setProperty(this.currentDocument.documentRoot, "overflow", overflow);
             this.currentDocument.documentRoot.elementModel.controller.changeSelector(this.currentDocument.documentRoot, "transitionStopRule", transitionStopRule);
 
+            this._toggleWebGlAnimation(this.appModel.livePreview);
+        }
+    },
+
+    // Turn on WebGL animation during preview
+    _toggleWebGlAnimation: {
+        value: function(inLivePreview) {
+            var glCanvases = this.currentDocument.iframe.contentWindow.document.querySelectorAll('[data-RDGE-id]'),
+                glShapeModel;
+            if(glCanvases) {
+                for(var i = 0, len = glCanvases.length; i<len; i++) {
+                    glShapeModel = glCanvases[i].elementModel.shapeModel;
+                    if(inLivePreview) {
+                        glShapeModel.GLWorld.restartRenderLoop();
+                    } else if (!glShapeModel.animate ) {
+                        glShapeModel.GLWorld._canvas.task.stop();
+                    }
+                }
+            }
         }
     },