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 leanirng CSS now.

Feedback 24

  1. 2

    If anyone has issues like I did in Chrome, even with experimental features on, it seems to work fine in FireFox.

  2. 4

    Yeah Zak… i’ve experienced some issues on Chrome and in Firefox works almost flawlessly….

    Great work Mary! But, do you know what is happening on Chrome? It’s not seems to works as beautifully on Firefox!

    PS: Change this comments section to Disqus wouldn’t be a good idea?

  3. 5

    Tested in Chrome (51.0.2..), Safari, and Firefox for desktop – works great for me! (Mac OS 10.10.5) And checked it out on iPad mobile Safari – also works great.

  4. 8

    Well Manoela sweetheart, I was happy that even I could make it work – I even made those images clickable!. On firefox and IE they work great, but on chrome the images disappear after a second or too.

    • 10

      Trina:

      Nice implementation amd your work for K Hope. (other links don’t work though).

  5. 12

    I installed this plugin on my websites and worked like a charm. But since Google Chrome updated to version 52, this script does not work at all anymore ! Can anyone help me to fix it ? It is still working fine on latest Firefox and IE.

  6. 18

    Hey everybody, thanks so much for the great feedback! We are looking into the problem related to the latest Chrome update and post a fix as soon as possible. Thanks, cheers, ML

    • 19

      Looks like we have a problem with the new version of Chrome (here it’s 53.0.2785.89 (64-bit)) and anime.js. The SVG path does not seem to get animated… Hopefully this will get fixed soon. Cheers, ML

    • 24

      Hi Thomas,
      there’s a new version and it’s fixed now. Please download the new ZIP or GitHub repo. Sorry for not mentioning anything earlier!
      Thanks and cheers, ML

Follow this discussion

Leave a Comment