Make Way Grid Effect

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.

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!