Leaderboard

this is quite strange and looks like a bug in Animate. If you force your clip to gotoAndStop(0) before the stagger or place your code on frame 2 in the timeline it works. With a single frame I did: console.log(this.boxes.children); this.boxes.alpha = 0.5; this.boxes.gotoAndStop(0) TweenMax.staggerTo(this.boxes.children, 1, {scaleX:2, scaleY:3}, 0.5); //this.boxes.box1.scaleX = 4 this.stop(); attached is my fla animate-stagger.fla.zip

Hi iuscare, One option is 'clip path': https://css-tricks.com/clipping-masking-css/ Here a first draft with tweened clips - based on a pen of Blake Owen: For other options have a look to the comment of CRAIG: Try it and put some cream on it ...

And here's an example of a particle fountain using the Physics2DPlugin.

Offscreen Canvas Canvas is fast, but it's not a silver bullet. You still need to be mindful of how things get rendered. If you're constantly drawing something that does not change much, like its shape or color, you may be able to improve performance by rendering that object to an offscreen canvas (cacheAsBitmap). Here's a good EaselJS demo showing the performance difference caching stuff to an offscreen canvas can make. Checking the cache enabled checkbox will provide a massive performance boost. http://createjs.com/demos/easeljs/cache And here's a simplified demo without any animations showing how to use an offscreen canvas. This is same technique I'm using in that canvas orbs demo to draw the gradient.

Canvas Appears Blurry On HiDPI screens, like Retina, 4K/5K, and a lot of phones, the canvas may appear blurry. The TL;DR version of it is that you need to scale the canvas to match to the pixel density. This should appear sharp on a HiDPI screen. This may appear blurry on a HiDPI screen.

Canvas Context I like to think of working with the canvas as telling a robot how to draw something, and this is done primarily through the canvas context. The context is also where you set all the styling like fill style, stroke style, line width, alpha, shadow, font, transforms, filters, blend modes, etc. Think of it kind of like the current CSS style. Here's a list of all the properties and methods available on the context. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D An important technique, particularly when doing transforms, is to save and restore the state of the context. Check out the comments in this demo. The same fillRect method is being called with 3 different context states. Note that saves can be nested, and every save call should have a matching restore call.