Stack to Content Layout Transition

An experimental layout transition where a stack of images animates to a gallery view, showing some more content.

The post Stack to Content Layout Transition appeared first on Codrops.


This content originally appeared on Codrops and was authored by Mary Lou

Today I’d like to share a little experiment with you that is based on the layout transition of Aristide Benoist’s amazing homepage. Basically, I’m trying to rotate this layout just like Siddarth did in this shot. No WebGL for this experiment so we definitely don’t reach the slickness level of Aristide’s work but it’s fun to try it out.

Our initial scrollable view looks as follows:

Once we click on an item, we animate the stack to the right side, enlarging the items and showing our content:

Here we can now navigate using the arrows. Once we scroll, we move back to the initial stack view.

Here’s the whole flow in a video:

Please keep in mind that this is very experimental and that there might be bugs 😉

I really hope you have fun with this little experiment! Thanks for checking by!

The post Stack to Content Layout Transition appeared first on Codrops.


This content originally appeared on Codrops and was authored by Mary Lou


Print Share Comment Cite Upload Translate Updates
APA

Mary Lou | Sciencx (2022-05-11T12:06:34+00:00) Stack to Content Layout Transition. Retrieved from https://www.scien.cx/2022/05/11/stack-to-content-layout-transition/

MLA
" » Stack to Content Layout Transition." Mary Lou | Sciencx - Wednesday May 11, 2022, https://www.scien.cx/2022/05/11/stack-to-content-layout-transition/
HARVARD
Mary Lou | Sciencx Wednesday May 11, 2022 » Stack to Content Layout Transition., viewed ,<https://www.scien.cx/2022/05/11/stack-to-content-layout-transition/>
VANCOUVER
Mary Lou | Sciencx - » Stack to Content Layout Transition. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/05/11/stack-to-content-layout-transition/
CHICAGO
" » Stack to Content Layout Transition." Mary Lou | Sciencx - Accessed . https://www.scien.cx/2022/05/11/stack-to-content-layout-transition/
IEEE
" » Stack to Content Layout Transition." Mary Lou | Sciencx [Online]. Available: https://www.scien.cx/2022/05/11/stack-to-content-layout-transition/. [Accessed: ]
rf:citation
» Stack to Content Layout Transition | Mary Lou | Sciencx | https://www.scien.cx/2022/05/11/stack-to-content-layout-transition/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.