Micro animations are one of the trends that has been leading the way in website design for several years. Micro animations are not only effects added to elements that activate when you hover the mouse or scroll the page. They can also be all kinds of animated illustrations and icons that start the animating when they become visible to the user.

Divi Pixel already has a similar module to achieve this: the Lottie Icon module. It allows you to add animated images in json format. In this update, we would like to supplement this arsenal with an additional weapon, which is undoubtedly a brand new module: SVG Animator. With these two modules, you can easily add animated icons and illustrations to your Divi website and surprise your visitors with creativity and professionalism.

Introducing SVG Animator

The topic of this module appeared at the end of July and was the brainchild of our senior developer Roberto. We saw great potential right away, and I had already fantasized about how many ways this module could be used. It took a while to get all the options right and we’ve released a couple of other updates in the meantime. Finally, we managed to complete the module and the results are stunning.

SVG Animator can be used to display large images on the page, but it also works for icons that will appear with an impressive animation effect. But there is a catch… You need stroked SVG files in order for the module to work properly. There are many pages where vector files are available but very often they are flattened and no longer outlined. So make sure to get stroked files with editable strokes and you are good to go. If you handle that, only the sky is the limit.

Animation Type and Duration

The SVG Animator module is not very complex. However, there are a few settings I would like to mention here. The first is the Animation Type. We can choose from Delayed, Sync or One By One, and each of them offers a different animation. If you select Delayed, then every path element is drawn at the same time with a small delay at the start. This is currently the default animation. For Sync animation each line is drawn synchronously. They all start and finish at the same time, hence the name `sync`. When you select One By One then each path element is drawn one after the other. This animation gives the best impression of live drawing.

Once you have chosen the type of animation, you can also choose the duration of the animation. This option is defined in frames. The higher the value, the longer our image is animated.

Animation Timing and Start Function

These options change the flow of our animation and defines when the animation should start. You have Path Timing Function and Animation Timing Function. In each of these options, you can choose 5 types: Linear, Ease, Ease-in, Ease-out and Ease-out Bounce.

The Animation Start Function have 2 options: Auto Start and In Viewport. Auto-start function will start animation automatically on page load, so in general, can be only used when the element is at the top of the page. In most cases, you will want to use In Viewport, which makes our animation start when the user reaches the viewport.

SVG Customization

It may sound a little unbelievable, but yes, we can customize our image using the module options. SVG Animator has options that allow you to change the color, adjust the width and height, and change the line width. By default, our image will be displayed in the colors that are used in the original file. If you want an image that uses several colors then it needs to be prepared in the colors you want. The color change will apply to all lines, so if you want a color image, do not change the line color in the module options.

The last option that is useful is line width. If we notice that our illustration or icon has too thin or too thick a line, we can correct it in the module options.

This is it! I hope you enjoy this article and believe that the new SVG Animator module will spice up your designs and give you more fun building amazing websites. If you haven’t purchased the Divi Pixel plugin yet, now is the right time. Get 10% discount with the coupon code “DP10″.