Faster page load using lightweight CSS and SVG animation (without JavaScript)

By Kyle | Posted Jun 1, 2017 | 4 min. (776 words)

Including animations on a web page is an exciting process. However exciting, it can be also an expensive process for your users. Common web animation tools, while effective, can create a lot of front end bloat with large Javascript animation libraries and multiple file requests for source images.

The end result (while pretty) can leave your user spending precious time waiting for the page to load.

Raygun lets you detect and diagnose errors and performance issues in your codebase with ease

It takes minutes to add Raygun into your software. Be alerted to issues affecting end users and replicate problems 1,000x faster than using logs and incomplete information from users. Learn more and try Raygun free for 14 days.

If you need to create an attractive new animation for your homepage, for example, you will need to keep the page load time well under two seconds. But you also want your page to look incredible and stand out from your competitors.

So, how can we create a lightweight solution that won’t affect your website performance and user’s experience? The solution is to build a high performing CSS and SVG animation without the JavaScript.

Creating a high performing CSS and SVG animation

Raw CSS animation on inline SVG

Pros:

Cons:

So, while a little hands on for some, I think it’s awesome that we can create a fully animated piece of art with a pretty much non-existent footprint using only CSS animations.

Next: I’ll jump into my process for creating something like what I’ve created below:

Most of the complexity when creating an animation from SVG elements is exporting the artwork in a way that allows you to create the animation you want. For the above image, I drew inspiration from a clip Fraser Davidson from Cub Studio made for Raygun.com a few years ago.

Creating the artwork for animation

Easily the hardest part of creating one of these animations is the creation of your file. You have to make it easy to animate post export.

You’ll need to know what you can animate to get the desired result, and the grouping of layers.

Knowing what the desired outcome is for the animation at this step is very important. Better planning allows you to group layers in such a way that can reduce complexity, and therefore reduce the amount of impact it has on your website performance.

Let me break down how I’m tackling this animation:

Once the artwork is sorted and grouped, the next step is exporting the SVG from Adobe Illustrator. When exporting, make sure you select inline CSS. While this may seem counter-intuitive as we want to manipulate classes, the last thing we want to do is fight generated classes for specificity.

Once exported, you can open the SVG file in an editor, and copy the complete SVG code into an HTML page. Then, begin to add the classes and CSS animations.

With each of the groups, we created in Adobe Illustrator, note the order of the SVG code. You’ll notice it is reversed as to which order of the layers panel is in. The reason is that in HTML code, shapes are rendered top down, so the further down the page.

There are two methods you can use for writing the complex CSS animations:

Staggered animations using short durations and animation offsets
Single duration variable + easing and percentage keyframes

There are pros and cons to each, but I prefer to use a single animation duration for the simple reason that I can slow down and control my entire timeline with a single variable. The cons to this approach are the limitations with animation easing.

For example, if you are only animating between keyframes 30% -> 40%, but have an easing function set to ease in, the easing is applied to the 0% -> 100% range, not just the 10% you have animated. I opt to apply the same easing function and timing to all the animations so that each keyframe occurs at the same point regardless of animation, making events easier to line up.

Final notes on a creating high performing CSS and SVG animation

Remember, your page load time should never be over three seconds. Raygun’s Real User Monitoring tool will assess each page and tell you exactly where performance issues lie, including if images and animations are too bulky for your page. Now, all that’s left to do is tinker with your keyframes and classes, and create your animation!