I know there are similar questions around here in SO, but I couldn't find one that addressed my case.

I'm using React and I have a component that maps over an array and renders its items as a list. They are shown one besides the other and the idea is that when you select one of them the one that is === params (gotten through useParams) is positioned in the middle and scaled up. Lets say I have this when nothing is selected:

Songs Artists Albums

When you select Songs, it's into this below (I'm using bold to simulate size increase, but the idea is that the word will be actually bigger, as if you changed the font from, say, 20px to 30px):

Albums Songs Artists

The same goes for when you select Artists (or Albums, for that matter):

Artists Albums Songs

The transition should be animated. The list can either be actually rotated (keeping the order of elements) or just the selected one being moved to the center, whichever is easier to achieve.

So, any suggestions?