Animating the mask

[dada78]

I love the script, thanks for that! One question in regards to animating the mask with canvas:

How would I be able to animate the actual mask (without the image)? Using GSAP I call TweenMax.from('.mask', 1, {scaleX:0.5, scaleY:0.5, ease: Power3.easeInOut}, 0);

but that animates the image with the data mask applied, not the mask itself.

Normally I would just add an id to the img tag like so: <img id="starMask" src="star.png" alt="star"> and then call it: TweenMax.from('#starMask', 1, {scaleX:0.5, scaleY:0.5, ease: Power3.easeInOut}, 0); but since it's canvas it's not working. How would I be able to call the actual mask in order to animate that? Thanks!

[codepo8]

You would need to re-apply the mask effect on every frame of the animation, so that doesn’t make much sense.

Sent from Mail for Windows 10

From: dada78 Sent: Monday, January 7, 2019 8:51 PM To: codepo8/canvas-masking Cc: Subscribed Subject: [codepo8/canvas-masking] Animating the mask (#10)

I love the script, thanks for that! One question in regards to make it work with canvas: How would I be able to animate the actual mask (without the image)? Using GSAP I call TweenMax.from('.mask', 1, {scaleX:0.5, scaleY:0.5, ease: Power3.easeInOut}, 0); but that animates the image with the data mask applied. Normally I would just add an id to the img tag like so: and then call it: TweenMax.from('#starMask', 1, {scaleX:0.5, scaleY:0.5, ease: Power3.easeInOut}, 0); but since it's canvas it's not working. How would I be able to call the actual mask in order to animate that? Thanks! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[dada78]

Just curious, why wouldn't that make much sense. After all that's how canvas animation works. Just wondering to see if anyone would know how to accomplish this.

[codepo8]

Well, canvas animation is different to what you’re trying to do with Greensock. You are animating the canvas element, not change its contents. Canvas was invented to allow for an element in the page to allow for pixel animation, but you need to use the canvas API for that, not do things to the element itself.

Much like rotating a paragraph in CSS doesn’t change its text content – it just rotates it.

The masking script here uses an image and a canvas and merges them. If you change the canvas, you need to also re-apply that merge before you see the difference.

It probably makes more sense to achieve what you are trying to do with an SVG filter, which totally could be animated as SVG natively allows for that.

Sent from Mail for Windows 10

From: dada78 Sent: Tuesday, January 8, 2019 8:15 PM To: codepo8/canvas-masking Cc: Christian Heilmann; Comment Subject: Re: [codepo8/canvas-masking] Animating the mask (#10)

Just curious, why wouldn't that make much sense. After all that's how canvas animation works. Just wondering to see if anyone would know how to accomplish this. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[dada78]

Yeah the SVG filter idea is a good one, thanks for that!

I was successfully animating a alpha gradient mask using Animate CC (which uses Easel.js) outputting to canvas. It looked something like this:

var mask_mc = this.mask_mc; var maskedContent = this.maskedContent;

//AlphaGradientMask maskedContent.filters = [ new createjs.AlphaMaskFilter(mask_mc.cacheCanvas) ];

maskedContent.updateCache();

// create timeline var tl = new TimelineMax();

tl .from(mask_mc.getChildAt(0), 2,{scaleX:0.2, scaleY:0.2, onUpdate:updateMask}, 'start')

//AlphaMaskFilter needs to be updated on every tick if it has to tween. function updateMask(){ mask_mc.updateCache(); exportRoot.maskedContent.filters = [ new createjs.AlphaMaskFilter(mask_mc.cacheCanvas) ];

exportRoot.maskedContent.updateCache();
console.log('updating');

}

So was wondering how to make this work with your example. Thanks!