I’ll show you how to create SVG animations. I’ll demonstrate all the steps I do to achieve neat SVG animations on my WordPress websites. Learn how to create this type of animation with ready to use SVG icons from a great library. You can use any other library, but I got the best results from the one I’ll present to you.

I’ll divide this tutorial into 3 parts. I hope if you follow all the steps, also together with the video tutorial, you’ll manage to make SVG animations in any WordPress theme or project that you want.

So, let’s start!

Please, follow along with the video tutorial to better understand all the steps needed for the SVG animations.

First, grab the SVG icons

Go to nucleoapp.com and download it for Mac or Windows. Check their pricing page, it’s just a one-time payment of $99 for lifetime updates and you can use in unlimited projects.

Then, open the app. I like to select the Outline icons.

You can change the stroke width and the colors. And, easily add a secondary color to your icon.

Let’s search for the TV icon used in the preview.

Now, you just need to click on the icon code and copy it.

It’s better to optimize your SVG before using it in your projects.

Secondly, optimize the SVG icons

Go to this website here (https://jakearchibald.github.io/svgomg/) and click on Paste markup.

Paste the code you got from the nucleo app.

Perfect. Now, in the Global setting turn on Compare gzipped, with a precision of 3.

In the Features section, just turn off the following options:

  • Round/rewrite number lists;
  • Prefer viewBox to width/height;
  • Remove raster images;
  • Remove <title>;
  • Remove viewBox;
  • Sort attrs;
  • Optimise single-path SVG.

I hadn’t tried all the options yet, but those recommendations listed above are the ones that work for me.

Then click the download button.

That’s it. Now you’re almost done already.

You just need to add some jQuery and CSS code to make the SVG animations run like the preview.

Adding CSS and jQuery code

Add the following CSS code to create the animate class you’ll use on your SVG icon.

/* -- SVG animation -- */
.animate svg {
fill-opacity: 0;
width: 50px;
height: 50px;
stroke: #006DB3;
stroke-width: 2px;
fill: transparent;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.animate svg path, .animate svg circle, .animate svg ellipse {
visibility: hidden;
}
svg.animate path, svg.animate circle, svg.animate ellipse {
animation: svg-animate 3s forwards;
animation-timing-function: ease;
visibility: visible;
}
@keyframes svg-animate {
from {
opacity: 0;
}
to {
stroke-dashoffset: 0;
fill-opacity: 1;
opacity: 1;
}
}

If you are using the Extra or Divi theme, go to Extra > Theme Options > Custom CSS. Paste the CSS here.

Add the following jQuery code to make the animate class activate when the user is on the viewport.

<script>
jQuery(document).ready(function( $ ){
//Animate SVG 
$(".delay svg").delay(1000).queue(function(next) {
$(this).addClass("animate");
next();
});
$('svg path').each(function(){
var length = $(this).get(0).getTotalLength();
var roundedLength = Math.round(length);
$(this).attr('stroke-dasharray', roundedLength);
$(this).attr('stroke-dashoffset', roundedLength);
});
var $animation_elements = $('svg, .et-waypoint'),
$window = $(window);
function check_if_in_view() {
var window_height = $window.height(),
window_top_position = $window.scrollTop(),
window_bottom_position = (window_top_position + window_height);
$animation_elements.each(function() {
var $element = $(this),
element_height = $element.outerHeight(),
element_top_position = $element.offset().top,
element_bottom_position = (element_top_position + element_height);
//check to see if this element is within viewport
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
$element.addClass('animate et-animated');
} else {
$element.removeClass('animate et-animated');
}
});
}
$window.on('scroll resize', check_if_in_view);
});
</script>

Again, if you are using the Extra or Divi theme, go to Extra > Theme Options > Integration > Add code to the < head > of your blog. Paste the jQuery here.

Credits: I got the jQuery code and some SVG knowledge from a free course lesson from the brazilian code teacher André Rafael at Origamid.

Making it happen

Now, you just need to paste the SVG code and apply the animate class.

If you want to animate the icon without the user scroll the page, just add the delay class to it.

You can play around the CSS code to change the size of the SVG icon.

Try different width and height for the icon. You can also change the animation speed.

I use 3 to 5 seconds, but you can play around until you find the best time interval for your animation needs.

That’s it!

Conclusion

Did you enjoy this tutorial on how to create SVG animations?

I was owed this tutorial to some friends followers of the blog. I hope to help more people out there too. I think this is a neat feature to impress clients and learn new web design skills too.

See ya!