Exploration of On-Scroll Layout Formations

The other day, I came across Stewart & Partners, a beautifully crafted site by the super talented folks over at Malvah Studio, and this grid animation really caught my eye:

As the content is pinned, you see the grid items stick to the top in this really slick animation. It got me thinking… what else could we do with this? What if it’s a grid? What if we animate them differently? So, here we are, with a fresh demo exploring that concept. Let’s call it “layout assembly” or “layout formation” 😀

This is basically playing with on scroll animations and pinning until a specific final layout is “completed”. There’s so many possibilities here, like for example this:

Or grid “assembly” animations:

…using some different origins:

Or, a row-based formation:

Hope this sparks some fresh ideas for you! It’s just a quick proof-of-concept, so forgive the mobile quirks 🙂

If you enjoy this kind of concept, you might also like this related exploration:

Make sure to check out the demo and thanks for checking by!