Canvas masking causes RangeError: Maximum call stack size exceeded
Animate CC creates a new mask_graphics for every frame that a mask is tweened.
This creates a massive chain of method calls and a massive amount of bloat to the file size.
Below illustrates an ultra simple 10 frame tween on a mask. If this mask is extended out to 1000 frames it will crash IE. At 3000 frames it will crash Chrome. There has to be a better method of generating these masks.
A simple tween
this.shape = new cjs.Shape();
this.shape.graphics.f("rgba(0,0,255,0.659)").s().p("Aj5D6IAAnzIHzAAIAAHzg");
this.shape.setTransform(25, 25);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
becomes
var mask = new cjs.Shape();
mask._off = true;
var mask_graphics_0 = new cjs.Graphics().p("ATiLGIAAn0IH0AAIAAH0g");
var mask_graphics_1 = new cjs.Graphics().p("AQeMVIAAq0ILLAAIAAK0g");
var mask_graphics_2 = new cjs.Graphics().p("ANZNkIAAtzIOiAAIAANzg");
var mask_graphics_3 = new cjs.Graphics().p("AKVO0IAAw1IR5AAIAAQ1g");
var mask_graphics_4 = new cjs.Graphics().p("AHRQDIAAz1IVQAAIAAT1g");
var mask_graphics_5 = new cjs.Graphics().p("AEMRSIAA21IYnAAIAAW1g");
var mask_graphics_6 = new cjs.Graphics().p("ABIShIAA51Ib+AAIAAZ1g");
var mask_graphics_7 = new cjs.Graphics().p("Ah7TwIAA81IfUAAIAAc1g");
var mask_graphics_8 = new cjs.Graphics().p("AlEU8IAA/3MAirAAAIAAf3g");
this.timeline.addTween(cjs.Tween.get(mask)
.to({graphics:mask_graphics_0,x:175,y:71}).wait(1)
.to({graphics:mask_graphics_1,x:176.9,y:78.9}).wait(1)
.to({graphics:mask_graphics_2,x:178.7,y:86.8}).wait(1)
.to({graphics:mask_graphics_3,x:180.6,y:94.8}).wait(1)
.to({graphics:mask_graphics_4,x:182.5,y:102.7}).wait(1)
.to({graphics:mask_graphics_5,x:184.3,y:110.6}).wait(1)
.to({graphics:mask_graphics_6,x:186.2,y:118.5}).wait(1)
.to({graphics:mask_graphics_7,x:188.1,y:126.4}).wait(1)
.to({graphics:mask_graphics_8,x:189.5,y:134}).wait(1));
AdChoices