How to scale a rounded cornered rectangle on X axis while maintaining corner ratios? GSAP/animate
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.
AdChoices