Make Way Grid Effect

A little grid interaction effect where adjoining items make way to a selected one that expands.

Today I’d like to share a little grid effect with you. This effect is based on the fantastic work by Alex Frison da Isla who is a great source of inspiration when it comes to creative web animations. The main idea of the effect is this: when clicking on an image in a grid, the image expands and all surrounding items “make way”, i.e. they move to the sides. The way the items move is the playful part and we have lots of possibilities here.

In the first example, surrounding items simply move away.

We can add a bit of elasticity to the motion or increase the range of items that get affected by the motion. When you open the HTML you will notice some parameters on the grids that define all these things:

<div class="grid grid--narrow" 
	data-duration="1" 
	data-ease="elastic.out(0.5)" 
	data-scale="3" 
	data-max-rotation="20" 
	data-spread="150" 
	data-max-distance="700"
	>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/13.jpg)"></div>
	</div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/14.jpg)"></div>
	</div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/15.jpg)"></div>
	</div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/16.jpg)"></div>
	</div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/17.jpg)"></div>
	</div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/18.jpg)"></div>
	</div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/19.jpg)"></div>
	</div>
	<!-- ... -->
</div>

When playing with the skew value, we can achieve an interesting stretchy effect:

Hope you have fun with it and that you can take this to the next level in your projects!

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 up to date with the latest web design and development news and relevant updates from Codrops.