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

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)

The paths for covering or hiding the item (separated by semicolons) data-uncover The paths for uncovering or showing the item (separated by semicolons)

The paths for uncovering or showing the item (separated by semicolons) data-fill The fill color of the paths

The fill color of the paths data-duration The time for the whole animation

The time for the whole animation data-easing-in The easing for the first step

The easing for the first step data-easing-out The easing for the last step

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!