How can I animate the size of a UI object when the users mouse enters it (or leaves it)?

How can I animate the size of a UI object when the users mouse enters it (or leaves it)?

  • override onMouseEnter → play animation forward
  • override onMouseLeave → play animation in reverse

Selecting which element to animate would depend on what’s the purpose and the hierarchy of the widget and its parent container. You could animate a size box, you could animate padding, you could animate widget size if the parent container allows it.

Widget animation is also not the only way to pull it off, it may be quite circumstantial but you could have an underlying actor drive the transform with a timeline, or have the widget interpolate its own size with Tick.


You could start with something along the lines of:

The whole story: