Alpha mask animation

[creechtv]

I am trying to animate the mask_mc from left to right using TimelineMax. I need a simple setup to set the position then move it across. Help is greatly appreciated.

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.to(mask_mc.getChildAt(0), 3,{x:400, 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');
}

[kglad]

are you using the greensock javascript library?

GreenSock | Docs | GSAP

[creechtv]

Yes I am trying to use that if possible.

[ClayUUID]

Is there a particular reason you're using an external tween library instead of the one that's built in?

[creechtv]

The only reason was that this example I found above was using it. Back in Flash days I was familier with greensock but a lot has changed. If there is a easier way without external that might be better as this is a html 5 banner.

[kglad]

use TweenJS v1.0.0 API Documentation : Tween (createjs.com)  unless you need some advanced features of greensocks library.