Clipping masks in Animate CC using GSAP

[Tony.hunt5687 0 Likes (Newbie)]

Hi, I'm creating a basic banner in Adobe Animate and need to reveal some text using a moving clipping mask.

 

I've tried creating a traditional clipping mask using animate and then animating the mask using TweenMax, but this doesn't seem to work.

 

Any suggestions?

 

Many thanks

 

Tony

[somnamblst 183 Likes (Specialist)]

The word clipping makes me think of print. Is your mask set as a mask in Animate?

masks_Canvas.fla

[Tony.hunt5687 0 Likes (Newbie)]

Hi yes, it is. But when I add in TimeLineMax to animate the mask, it stops working.

[somnamblst 183 Likes (Specialist)]

I just tried to animate a mask using a createjs frame script and it did not budge. Found this previously asked question. Appears a scripted mask is not possible.

 

 

[davi 100 Likes (Specialist)]

It's possible but it's a pain in the butt and probably overkill. I wrote the code for it on some other thread for Animate CC. Hopefully Adobe changes this.

It'll be easiest to animate it manually, and then trigger it via script when you want to have it happen.

[Tony.hunt5687 0 Likes (Newbie)]

Thanks davi, how does one go about triggering Animate animations using GSAP scripts please? Do you have any examples?
 

Many thanks

[davi 100 Likes (Specialist)]

Just use regular Animate actions.

So make your mask animation inside of a movieclip and give it an instance name (i.e. "myClip_mc"), add a stop action in frame 1 inside that movieclip > this.stop(); then add a frame label to frame #2 and call it something like "in". This is where your mask animation starts but it's waiting idly for you to tell it to start playing. 

Then somewhere else (wherever it should be) just call this.myClip_mc.gotoAndPlay("in"); Obviously, the path to which you target the clip will change based on your own file.

You can add the script to Animate's timeline or attach it to one of GSAP's events like onStart, onComplete, etc etc.