Responsive Grid Item Animation Layout

      

This is s responsive, magazine-like website layout with a grid item animation effect that happens when opening the content.It’s been developed by Codrops.

The responsive layout has a sidebar and grid items that animate to a larger content area when clicked. In the first demo the content area fills the grid (inspired by a concept by Virgil Pana) and in the second demo, the whole layout moves to the left while the grid item is expanding (inspired by this Dribbble shot by Sam Thibault).

GridItemAnimation

The expanding element (which is a dummy element and not the grid item itself) is not animating in width and height but instead its original dimensions are already of the expanded size and we simply scale it down initially.

Demo    Source