How can I create a dynamic animation where components enter the screen, move to the center along a specific axis, and rotate?

Question

I'm trying to create a dynamic animation where components enter the screen, move to the center along a specific axis, and rotate as they do so. I want to achieve this by taking into account the origin of each component and the screen's origin.

Now, I'm looking for guidance on how to animate these components using a preferred animation framework or library. Are there any specific techniques or methods I should consider? Any recommended libraries or resources that can help me achieve this animation effect?

I would appreciate any insights or suggestions on how to implement this dynamic animation. Thank you in advance for your help!

PS: I also have another animation problem involving a text caroucel react spring will probably help with