Managing 25 animated buttons

I'm trying to think thru the most efficient way to handle a large volume of animated buttons that can't be ganged into a panel.

Here's an example of a prototype I whipped up with temp art:

Spoiler

I have a few problems with this first stab ...

First is that each of these buttons has it's own animation clip, it's own animator controller and it's own animator component. I can't see any way to avoid this... I guess somewhere I was thinking that I could share an animator controllers and point these to the animation? But I couldn't see any way around this as each button shares the same animation curve on the opacity, but needs a unique destination value for the positional keyframe in the animation.

Next is editing the final positional destinations. These are roughly eyeballed into place and to achieve this there was a lot of copy and pasting going on between animation clips. That's fine for a prototype... but if I want to fine tune each final position, I need to drill down into each clip and set the values in the end keyframe for that animation. Is there anything I've missed that would make this any easier? Not a terrible thing, but if there are changes to be made (and I've not looked into multiple devices and resolutions) this could become tedious!

The main issue I have is registering all of these buttons for the appropriate events. I'll need an event that activates all 25 buttons and displays them. I'll also need to call a state that reverses the animations to remove them when one of the buttons is selected. I don't want to be wiring 24 buttons to the 25th one's OnClick event in every possible combination. I can imagine each button calling a single public method somewhere that has a reference to each button. I am also imagining that I could write a script on each button that registers that button to someone else's event?

Generally I'm looking for advice on how best to manage a situation like this one, where there are a large number of buttons that can't really be anchored to a single animated panel.

 

So, what as occurred to me, whilst contemplating philosophically upon the Throne of Porcelain, was that an animation clip can be made on a parent GameObject and any of the properties in its children can be animated within the clip.

This help solve the need to simplify the number of animation clips and animator controllers. I can simply have a parent GameObject for all of the buttons and then in one animation clip animate the positional values for all of the buttons.

Using a Canvas Group, I should be able to modify the opacity of all of the buttons at once, so this means only 26 curves: 1 for the Opacity of the canvas group on the parent and 25 curves for the Anchored Position of the buttons.

 

For an effect like that, I would use tweens instead of an animation. Something like DOTween should work, you can tween both the position and opacity of any UI objects (or tween the positions of all the buttons but tween the opacity of a canvas group they all sit in). Then you can use any number of methods to get the end locations; you could derive them mathematically maybe, you could create a group with a bunch of children whose transforms map to a button position, you could hard code the values (which is essentially what you're doing with the animation clip anyway), load them from a file, etc. Then it's very easy to add/remove buttons without having to go and fix an animation clip.

That said, the one animation clip on the parent is also perfectly reasonable. Much better than 25 separate animation clips/animators