Slowly, over the next few months, I began learning more about SVGs. How to build them, how to tweak them, what can and can't be done and how to bring them to life.
For a while I was satisfied with this. It worked, looked pretty cool and achieved what I intended.
But the itch to explore began to grow and I wanted to refine the process. As you can see from the source it wasn't the easiest thing to manage. I wanted to find out the best way to animate SVGs and what pros and cons of the various methods were.
There are really three ways to animate SVGs:
SMIL (Going to be deprecated)
- Easy to change the routine of the animation. If I wanted the horse animation first, just change it's position in the array.
- Timings can be dynamically changed. As you can see above I've provided links to speed up/slow down the animation.
- Still needs a bit of CSS (classes) to keep it simple
- May not perform too well on low-end devices or if the amount of work done in JS is large
Attempt #2 - CSS
The major issue I experienced was with the animation-delay property. As the name suggests, this property lets you specify a delay for the animation. My intention was to delay the pending logo transitions so that they'd start after the previous has finished. This worked great at first, but when the animation repeated the delay was ignored and everything started happening at once. As it stands this ability is currently lacking from the CSS spec. Some Googling suggested that I need to make clever use of the keyframes so that, for example, the first logo uses 0-25%, the second uses 25-50%, and so on.
This worked, but it isn't nice. If I decide I want to add or remove a transition I will need to work out and update all the keyframe timings.
- Very few lines of code needed to animate something.
- Animations are smooth
- Timings are difficult and not flexible (as mentioned above).
- Timings are fixed and cannot be altered on-the-fly
Attempt #3 - Promises (JS)
Before this I hadn't really used promises (other than a little in NodeJS) and I knew the browser support was lacking so I checked out some of the libraries that provide promises.
I settled on Q, mainly for its built-in
delay function that would be super useful with timing animations.
- All the same as the JS ones above
- By making use of the
delayfunction timing between animations can easily be varied.
- Nice, easy to read syntax
- Much more code as a rather large library was used.
I'm still experimenting and learning. I'm sure that there are better ways to create more complex animations (if anyone knows, please let me know).
When working with SVGs on the web I urge you to make use of SVGOMG to remove bloat and cleanup your SVGs.
Also, SVGs manipulation by JS/CSS may or may not be allowed depending on the way you include the SVG on the page. I recommend checking out SVG On The Web to learn more.
One thing I did discover while on this journey is that Firefox (at time of writing) doesn't handle the
transform-origin property, causing things to incorrectly fly around the logo in comical fashion.