The end result (while pretty) can leave your user spending precious time waiting for the page to load.
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.
Creating a high performing CSS and SVG animation
Raw CSS animation on inline SVG
- The image is inline HTML, which means zero file requests
- Super small code footprint
- Plan your CSS and SVG animation in detail. You cannot just export the image and expect usable SVG code. Also plan ahead and know which shapes need to be grouped
- It’s very hands on. If you manually add classes to SVG paths, and you decide to change your source image, you must reapply the classes
- Internet Explorer / Edge do not like animating SVGs. Fallbacks with static images works fine
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:
- All the artwork moves as one, both into and out of the canvas, and scale. With this knowledge, I create a new group in Adobe Illustrator that contains all the artwork. The reason for doing this is so that when I export the file as an SVG, I can target that group item and add a class to it that performs the animation I want
- The Raygun rotates and moves independently of the beam and the sparks that come from the gun when firing, so while contained in the artwork group, I create another group that contains all the pieces of the Raygun
- The shine/sheen moves across the body of the Raygun, above the shadows but beneath the surface detail. I order the layers as such and create a mask of the Raygun. Within the mask, I add a polygon that I can move from left to right to create the sleek shine effect. This whole layer needs to move with the Raygun, so I also placed it inside the Raygun group
- There are a few ways I could have tackled the particles and beam. I opted to leverage the ability to animate a stokes border and border-offset using the CSS properties ‘stroke-dasharray’ and ‘stroke-offset’. I drew the completed paths I wanted two dashes to follow and worried about how they would look after the fact. Both these groups are contained in the artwork group
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.
Adding classes and creating the 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!