Lines to Content Layout Animation

A simple layout switch example where we go from a typography row view with inline images to a large image preview with more content.

Today I’d like to share a little layout animation with you. The idea is to switch from a line view to a larger content view while animating a tiny image. This time, I used GreenSock’s Flip plugin which made things a lot easier as it does most of the work for transitioning an element to a new state and new layout.

The effect is inspired by part of this cool video by Holographik:

Typography elements disappear while images get animated to larger views.

The initial view of our layout is the following:

When clicking on one of the images, we transition to a new layout which looks as follows:

The whole flow looks like this:

The Flip plugin is a very useful tool that you can use for many complex cases. It also factors in nested transforms which is something quite special as it allows for powerful view switching without compromising your structures.

Hope you enjoy this demo and find it useful! Thanks for checking by!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!