Streaming live at 10am (PST)

Page transition and element animation


It is my first time posting here, so I apologize for any mistakes I might make!

I am trying to build a website that has five image elements centered in a 3 and 2 formation on the home screen. When the user clicks on one, they are supposed to rearrange in a vertical array to the left and shrink in the process. Then, the user should be able to click the ones below or above the selected image to change the information shown on the rest of the screen.

Here’s a quick sketch of what I mean:

In the sketch I also tried to convey, that some of them could be cut off on top and bottom, since In my mind it should look quite chaotic if 5 elements fly “through” each other to get to “their spot”. Even better: All non selected ones could disappear, the selected element flies to the left and they reappear above and below.

I couldn’t find a way how to do any of those things and if they are even possible! I am really sorry if I missed a key part of the tutorial series or forum posts here!

Thanks for any help!

I’m also open to criticism, if the idea itself is flawed