GSAP in Flash Canvas - Null Target Error on Masks

[mcstampfunk 0 Likes (Newbie)]

Hi All,

 

I am trying to animate a mask in a Flash HTML5 Canvas document using TweenLite. I am trying to animate a symbol that is in a mask layer. But when I try I get a JavaScript console error:

 

TweenLite.min.js:12 Uncaught Cannot tween a null target.

 

My other objects animate fine. I believe I have all the proper .js files loaded in the HTML (easelJS, tweenJS, movieclip, preloadJS) and the Tweenlite files (CSSPlugin, EasePack, Tweenlite). 

 

Here is the code I used that throws the error. 

TweenLite.to(this.leftYellowStripeMask, .5, {y:-9, ease:Quad.easeOut, delay:.3});

I'm guessing masks are not supported this way?

 

Thanks,

 

[Carl 9,066 Likes (Superhero)]

Please remove the TweenLite code and try

this.leftYellowStripeMask.y = -9;

Does that work?

[mcstampfunk 0 Likes (Newbie)]

No, and a new error message:

 

Uncaught TypeError: Cannot set property 'y' of undefined.

 

It doesn't seem to recognize the movieclip instance. The movieclip holds a vector shape, which is the mask. This is a file that I converted from Flash AS3/Greensock to a HTML5 Canvas doc, if that matters.

[Carl 9,066 Likes (Superhero)]

Thanks, that's very helpful and leaves us with 2 options. Either you don't have an object called leftYellowStripeMask or EaselJS doesn't let you target that object.

 

If you can't set the y of an object directly, neither can TweenLite.

From what I recall animated mask supported is limited with EaselJS.

I don't think masks get treated like MovieClips or display objects once they are exported. The CreateJS team would be able to give you a better answer.

[mcstampfunk 0 Likes (Newbie)]

Thanks Carl. We ended up just dropping out the masks for now. But I'll check with CreateJS for future attempts.