Skip to main content
Participant
March 29, 2021
Question

Alpha mask animation

  • March 29, 2021
  • 1 reply
  • 532 views

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');
}

    This topic has been closed for replies.

    1 reply

    kglad
    Community Expert
    Community Expert
    March 29, 2021

    are you using the greensock javascript library?

     

    GreenSock | Docs | GSAP

    creechtvAuthor
    Participant
    March 29, 2021

    Yes I am trying to use that if possible.

    Legend
    March 29, 2021

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