Reveal Animation Effect With SVG Overlays

Adding SVG Overlays

This effect will be visible when the page is loaded to show the page content. First, let’s create a SVG element which will contain the different overlays. I wanted the overlays to animate like it is paint being washed away to let the content appear.

HTML

For this effect I’ve added four layers of overlay but you can have more or less it’s up to you.

<svg class="group-overlays" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path class="overlay"></path>
    <path class="overlay"></path>
    <path class="overlay"></path>
    <path class="overlay"></path>
</svg>

Adding Some Style To The Overlays

CSS

Now for each path element I give a different colour and change the opacity to make the revealing effect even better. You can put your own colours or just use one colour and give different opacities.

.overlay:nth-of-type(1) {
    fill:#ffffff;
    fill-opacity:.4;
}
.overlay:nth-of-type(2) {
    fill:#eeeeee;
    fill-opacity:.6;
}
.overlay:nth-of-type(3) {
    fill:#dddddd;
    fill-opacity:.8;
}
.overlay:nth-of-type(4) {
    fill: #cccccc;
}

Animation Settings

JavaScript

All you need to do is changing the settings to make the overlays look the way you want. You can change the duration of the animation, the delay between each overlay, change the shape. Just experiment and see how it goes.

this.numPoints = 50;
this.duration = 1800;
this.delayPointsMax = 600;
this.delayPerPath = 200;

I’ve modified the script so every time the shape of the overlays is different and kind of unique.

This is how it should look like. If you can’t see the animation it’s probably because your browser doesn’t support it.

Have a look at the demo and feel free to download the files. Don’t forget to share and like this tutorial to support the site.