How to scale a rounded cornered rectangle on X axis while maintaining corner ratios? GSAP/animate

[KeelyM]

I have an odd question and I'm not even sure how to word it properly to find an answer via Google. I'm working in Adobe Animate in an HTML5 document and I have a button that I'm animating using Greensock/GSAP. My button is a rectangle with rounded corners which looks like this:

I created the rounded rectangle shape in Illustrator, then brought it into my Animate project library, converted it to a bitmap, and put it inside a movieclip.

What I would like to happen when the user clicks the button is for it to scale along it's X axis to end up looking something like this:

(This image is from my After Effects file where I drafted up the motion I was looking for, I had to animate the path directly, not the scale property, to get it like this).

Currently, when I test my Animate project and click on the button it ends up looking like this:

Which is not the intended outcome.

My code for this is:

function Down(){
var tl_down = new TimelineMax();
tl_down.to(menuBtn, .5, {scaleX: 5, ease:Quad.easeOut});
tl_hover.stop();
}

The tl_hover is referencing another timeline where I animate the little circles on mouseover.

Is there a way to have this rectangle scale up while maintaining the corners as they are? I imagine it won't work as long as my image is a bitmap - can I create this shape as a vector in animate and animate the path via Greensock? I'm very much a beginner at this, any advice is much appreciated! Thanks.

[Nicktendo28]

I use two shapes instead of trying to scale the shape to be longer.

Take the small shape put it al the top layer. Then take the bigger shape and put in on the bottom later.

Then you can animate the bigger shape coming in with a mask.

This will keep the shape and corners exactly how you want them.

[KeelyM]

Thanks nickg28. I'm unfamiliar with working with masks in Animate, though I use them a lot in After Effects so hopefully I'll be able to figure it out!

[ClayUUID]

The main things you need to know about Flash/Animate masks:

• If there's nothing on the mask layer, no masking occurs.
• Masked layer content is revealed where the mask IS, not where it isn't.
• Support for animated masks in Canvas documents is rather limited. Tweens are fine. Nested movieclips, not so much.

[KeelyM]

Is there a certain way you have to call to mask layers to use them in functions?

I have my mask layer and animated it with a classic tween, but I have this.stop(); in my actions layer.

I defined some variables -

var menuBtn = this.menuBtn; // my mask layer

var longMenu = this.longMenu; // the layer below the mask layer

Then I wrote a function  -

function Open(0{

this.menuBtn.gotoAndPlay(2);

}

so that the animation would play.

Then I put the event listener on my movieclip which is below the mask layer -

longMenu.addEventListener("mousedown", Open.bind(this));

When I test it I get an error that menuBtn is undefined. It does match the instance name assigned to that movieclip.

[kglad]

use 9-slice scaling.

right click your library rounded rectangle>click properties>tick enable 9-slice scaling>ok.

retest.  the scaling will probably be down the say you want but if not, go to the movieclip's timeline and adjust the slicing.

[JoãoCésar]

I think he is working with a HTML5 document.

[ClayUUID]

As noted, doing what you want automatically requires 9-slice scaling, which isn't supported in Canvas mode, so you'll have to fake it.

I'm curious why you're adding the weight of a third-party tween library to your project, when Animate already has a perfectly good tween library built in, that's used internally by Animate itself.

TweenJS | A JavaScript library for tweening and animating HTML and JavaScript properties

Does GSAP support some particular advanced functionality that you require?

[KeelyM · Accepted solution]

Thank you everyone for the responses. I forgot about TweenJS and I'm very new to code so I just sort of went with the first thing I found (GSAP) and it's been fairly easy to use so far. I may look at TweenJS now though and start using that, if it'll be more light-weight since it's internal to Animate.

[KeelyM]

Ooookay, it's been a minute since I've used stage/navigation controls in Animate. I was trying to call to the movieclip's timeline, but my timeline animation was on the main stage so I changed my function to say

this.gotoAndPlay(1); // as opposed to this.menuBtn.gotoAndPlay(1);

and it's working now.

Sometimes I just have to feel pretty stupid to figure things out I guess lol.