Im trying to figure out where I should draw the line when it comes to animations in design system components. + On one hand, I do like the idea that if my button handles some animation, now all my buttons look extra fabulous. - On the other hand, if the simplest Text composable animates its color, theres a ton of stuff happening almost all the time. When is too much, too much? Please let me know if you have tried one or both alternatives, how did it go?

Why not make it an option when declaring the button? If you give the calling site the option to animate it or not, it lets your designers have the choice of what looks right from a user standpoint. In this case, it could either be a flag, or maybe it’s own separate composable if there’s a ton of conditional logic to be had.

Thanks for the feedback @mattinger! Would you feel the same way if the animations mentioned are small delights, i.e. the button might animate its change of color, appearance/disappearance of a loading indicator, etc. I can see that this might be too much (and unneccesary work) for a simple

Text

composable.

Its hard to give any definite rules of thumb without assessing the impact on the screen as a whole. The text one does seem like a special use-case - i would make that a special composable for where it is needed, but I think animations on buttons / moving items etc. should be standard unless the profiler is complaining about performance, in which case disablling it through a parameter might be the best way forward. Ideally if an animation can be separated out, almost as a component itself which can be injected then that makes for a more maintainable set up/

My general opinion is that an animation should serve some purpose to the user. In the case of a loading button, it indicates that the application is doing background work. Material ripples/button color animations usually indicate to the user that a button is changing state (from say idle to pressed, etc….). If it’s not conveying some useful information to the user it’s just window dressing.