Articles /Pin to ProfileBookmark

Stack to Content Layout Transition

May 24, 2022  •  @codrops  •  4,500
Copy linkTweet this

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!

CSSHTMLJavaScript
This article was originally published on codrops.com
×

Success!

Help @codrops spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with Github
about: ({
version: 0.1.6 BETA 11.29,
whats_new: article editor v2,
up_next: tip code demos,
coming_soon: embeddable tipping,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.6,
notes: article editor refresh

version: 0.1.5,
notes: added pins + new badge

version: 0.1.4,
notes: home refresh + tools

version: 0.1.3,
notes: added reference + demos
)...
recent_tips: (
tipper: @dert,
amount: 1000 SATS,
source: article

tipper: Anonymous,
amount: 1000 SATS,
source: article

tipper: @Loverboylove,
amount: 500 SATS,
source: article
)...