We do a lot of cool stuff but the truth is that by the time we launch it, the cool stuff is a couple of months old and we have moved on to the next cool project and are excited about that. SVG animations though are pretty neat and I wanted to share some of the process we went through on a recent project.
Check out Mio Global (on anything other than Internet Explorer. More on that later...) and at the top of the page you see an animated pulsing heptagon for some cool new software called PAI that can link up to your heartrate tracker.
The brief we got from the design company was a static image and the comment “Lines radiate in background.“ Add this to the requirement that the client needed full content management in multiple languages and needed a solution that could be portable to tablets that would be running off line, and we didn’t have a ton of choices.
The answer we came up with was SVG Animation.
The challenge when working with animation is that you need to think about timing and motion which is very hard to clearly represent in a single image. The other thing is that everyone who hears the description has to be on the same page.
The first thing we did was create a quick and dirty demo so we could narrow down the scope.
This proof-of-concept has the logo heptagon in the middle of the screen. The lines appear on load and radiate outward from the logo like ripples in a pond. Very cool but not what they wanted:
Designer: We envisioned that the pattern would always be visible/still and beats would emanate away from the logo and pulse through the pattern, 1 beat every second (60bmp). If we could also make the corners rounded to mimic the PAI logo.
Great guidance! We rounded the corners and updated the file.
Client: I feel like the other version was closer. This just looks all wavy as you can't see the pulsing. I think it is more important to get the pulsing than the traveling line.
Designer: It is looking much, much closer to what we had in mind.
Uh oh. Client doesn’t like it. Designer does.
Detailed Designer Feedback: … it's a bit ‘steppy’ and a bit slow. The actual logo should pulse like a heart beat and then ripples should smoothly emanate out like a ripple on a pond.
Wondering if we could try 2 options:
- One ripple at a time. It beats and then the pulse makes its way through all the rings before it beats again.
- Could have multiple beats- The first beat could dissipate and become finer near the outer edges while another new one begins.
Ok, so we now know that the logo needs to pulse too! Or do we?
Client: I don't know if we want the logo to pulse as well. That might be too much pulsing I think....?
Eventually after a few conversations we came up with some timing. Since no one was sure what that should actually be, we built this as an easy to change variable. We also set other variables for the size of the logo expansion (1.03x) and the size of the rings when the pulse moved through them (2x)
Unfortunately we didn't save V3 and neither Conrad or I can remember exactly what it was, but the designer and the client both liked it. All we had to adjust was the timing.
Client: In version 3, could we have the second beat start just before the first beat reaches the end? When the first pulse is about 3/4 of the way through the rings, the logo beats again, sending out a second pulse. The first pulse finishes while the second pulse is now moving its way through the rings.
We did a quick tweak on V3 (they had decided to drop the background image by now) and adjusted the logo to expand at 1.04x to make it more visible (it is amazing what 1% can do.)
What About Internet Explorer/Edge?
SVG’s animations are handled differently in IE/Edge than in Safari, Firefox and Chrome. We looked at their analytics and IE/Edge combined represented only 6.5% of user sessions. Rather than create a whole new solution just for these users we decided to leave it as is. In IE/Edge it loads as a static graphic.
In the end we did 5 versions. Total elapsed time was a bit over 2 weeks to co-ordinate the back and forth and gather opinions from the various stakeholders. During this time we worked on performance improvements and added a few variables so we could do quick turnarounds on tweaks to specific elements once we knew what those were going to be.
What would we do differently next time?
Next time we we will ask for much more explicit written direction at the start from all stakeholders. If we had been provided with a couple of variations of the static image we might have known about the pulsing logo and when to start the second “pulse”. Sometimes when working on a tight deadline it is easy to cut corners, assume everyone has the same idea, and just rush off to get the job done.