Make Way Grid Effect

This content originally appeared on Codrops and was authored by Mary Lou

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!

The post Make Way Grid Effect appeared first on Codrops.

This content originally appeared on Codrops and was authored by Mary Lou

Print Share Comment Cite Upload Translate Updates

APA

Mary Lou | Sciencx (2022-06-28T10:00:48+00:00) Make Way Grid Effect. Retrieved from https://www.scien.cx/2022/06/28/make-way-grid-effect/

MLA

" » Make Way Grid Effect." Mary Lou | Sciencx - Tuesday June 28, 2022, https://www.scien.cx/2022/06/28/make-way-grid-effect/

HARVARD

Mary Lou | Sciencx Tuesday June 28, 2022 » Make Way Grid Effect., viewed ,<https://www.scien.cx/2022/06/28/make-way-grid-effect/>

VANCOUVER

Mary Lou | Sciencx - » Make Way Grid Effect. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/06/28/make-way-grid-effect/

CHICAGO

" » Make Way Grid Effect." Mary Lou | Sciencx - Accessed . https://www.scien.cx/2022/06/28/make-way-grid-effect/

IEEE

" » Make Way Grid Effect." Mary Lou | Sciencx [Online]. Available: https://www.scien.cx/2022/06/28/make-way-grid-effect/. [Accessed: ]

rf:citation

» Make Way Grid Effect | Mary Lou | Sciencx | https://www.scien.cx/2022/06/28/make-way-grid-effect/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts