While trying to create a scale effect when a button is pressed, multiple limitations were discovered.
Please refer to this Figma demo outlining each issue
Having a simple color affect when pressed worked fine, as the height and width of the button does not change.
However, if you scale the button (even if you try to keep the container the same size through padding) there are several issues that occur. Please refer to the Figma interactive example above for a demonstration for each of the examples listed here
Example 1: This is an example of a button that only changes the color when pressed.
Example 2: This button tries to change the scale (and color) when pressed.
However, the text doesn’t transition smoothly as the button container does.
Also, the button doesn’t stay centered and instead is anchored left during the transition.
Example 3: This button also tries to change the scale (and color) when pressed but through an alternative method.
It’s done through a hack, where you instead change the padding and font size proportionately to mimic a scale without actually scaling.
It looks better than the one above (though the text still doesn’t look exactly right), but it is not a true scale and it also has the anchored left issue during the transition.
Example 4: This button takes out the auto-layout factor entirely by using a fixed width button inside of a fixed with frame.
This allows for the scaling effect to work, but still shows how the text scaling ignores the smart-animate smooth transition, instead acting as a dissolve.
Also, here is a link to view the Figma project file - Figma
Anyone else having this issue or know a workaround for this? Welcoming all input! Thanks!