/    Sign up×
Articles /Pin to ProfileBookmark

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.

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" 
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/13.jpg)"></div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/14.jpg)"></div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/15.jpg)"></div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/16.jpg)"></div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/17.jpg)"></div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/18.jpg)"></div>
	<div class="grid__item">
		<div class="grid__item-img" style="background-image:url(img/19.jpg)"></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!

This article was originally published on codrops.com


Help @codrops spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 9.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ

legal: ({
terms: of use,
privacy: policy
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
recent_tips: (
tipper: @ddiebold17,
tipped: article
amount: 1000 SATS,

tipper: @Mqlinka19,
tipped: live stream
amount: 4900 SATS,

tipper: @Mqlinka19,
tipped: article
amount: 10 SATS,