Item Reveal Animations with SVG

Today we’d like to share some animated item reveal effects with you. These effects can look quite interesting on image grids, covering and uncovering every grid item when navigating. The idea was sparked by the beautiful and creative JOHO’s website. For the animations we are using the brand new anime.js library by Julian Garnier.

The main idea is to use fitting coupled effects that work well with each other, and to play with organic looking shapes. Using SVG paths allows us to specify several steps for the animation which leaves us with virtually endless possibilities. Today we’d like to show you a couple of examples and we hope that this inspires you for more creative ideas.

The beautiful photography we use in the demos are from Unsplash.com.

In one of the demos, we also include a YouTube video using Plyr, a great, easy to use HTML5 media player by Sam Potts.

Let’s have a look at our grid pages:

<div class="grid-pages">
	<div class="grid grid--vertical grid--current grid--style-1" data-path-cover="M 0,0 L 0,0 C 0,0 0,0 0,5 C 0,10 0,10 0,10 L 0,10 Z;M 0,0 L 0,0 C 0,0 5,0 5,5 C 5,10 0,10 0,10 L 0,10 Z;M 0,0 L 10,0 C 10,0 10,0 10,5 C 10,10 10,10 10.1,10 L 0,10 Z" data-duration="400">
		<div class="grid__column">
			<div class="grid__item">
				<!-- ... -->
			</div>
			<div class="grid__item" data-delay="75">
				
			</div>
		</div>
		<div class="grid__column">
			<!-- ... -->
		</div>
		<div class="grid__column">
			<!-- ... -->
		</div>
	</div>
	<div class="grid grid--vertical grid--style-1" data-path-cover="M 0,0 L 10,0 L 10,0 C 10,0 10,0 5,0 C 0,0 0,0 0,0 Z;M 0,0 L 10,0 L 10,0 C 10,0 10,5 5,5 C 0,5 0,0 0,0 Z;M 0,0 L 10,0 L 10,10 C 10,10 10,10 5,10 C 0,10 0,10 0,10 Z" data-duration="400">
		<!-- ... -->
	</div>
	<!-- other grids and nav -->
</div><!-- /grid-pages -->

The main container, grid-pages has all the grids that can have their cover and uncover paths defined. There are several data attributes that we can use to customize the animation. Note that all these can also be applied to individual grid items which will overwrite the ones defined in the parent grid:

• data-cover The paths for covering or hiding the item (separated by semicolons)
• data-uncover The paths for uncovering or showing the item (separated by semicolons)
• data-fill The fill color of the paths
• data-duration The time for the whole animation
• data-easing-in The easing for the first step
• data-easing-out The easing for the last step
• data-delay The delay for the animation

If nothing is defined, we’ll simply show the default animation which is one similar to the JOHO’s website. Note that although you can theoretically add any number of path steps, this works best with a maximum of three steps/paths: the first one that hides/shows an item completely, a second one for the middle step and a last one that shows/hides the item completely. Paths need to have associated and an equal number of points, i.e. when you go from a circle to a square, make sure those points that will be the corners, are present in the circle.

We hope you like this little experiment and find it inspiring!