Item Reveal Animations with SVG

An experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js.

ItemRevealer_800x600

View demo Download source

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.

Attention: We are working with some experimental animations on SVG paths. Please note that there might still be issues in some browsers.

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 -->

ItemRevealer_grid01

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

ItemRevealer_grid02

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!

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.