Under The Microscope

Animating CSS Gradients, One Frame at a Time

While working on the recent launch of Airfoil 5.8 (with Sonos support!), I wanted to visually convey the idea of wireless broadcasting by using the tried-and-true pattern of concentric circles. To really sell the effect, I wanted these circles to animate when the mouse cursor was hovering over them. This took some doing, but a bit of inspiration from my childhood got us where we wanted to be.

Getting Started with Gradients

The easiest way to display concentric rings is a simple radial gradient, done in CSS. CSS gradients are a lightweight way to add all sorts of visual patterns to the web. This means not just the smooth gradual changes between colours generally associated with the word “gradient”, but also lots of other repeating patterns.


This is the desired look, but I really wanted these radial circles to move.

Gradients are super useful, but they’re usually about as animated as a Moai. Unlike many other web elements, you can’t just set the start and end states, then have the browser interpolate out a smooth animation. I expect this will one day work in the major browsers, but for the moment it’s not supported.1

Stop Motion Inspiration

To get the animation I was after, I reached back into my childhood. Long ago, in the days of VHS, I made stop-motion animations with my family’s clunky camcorder. I would painstakingly build a tiny set and characters out of clay, then move it all very slightly, to animate a scene one fraction of a second at a time. It was arduous, but much like CSS now, I had to work with what I had.


A still frame of an unlucky Play-Doh guy getting hit in the head with a snowball, circa 1992 or so. Sorry Pixar, I went into software design instead of animation.

I realized we could put a new twist on that old stop-motion technique, by writing out CSS to create one frame at a time, then using the animate function to cycle through them. It would work a lot like those old animations I used to make, but with the “frames” created from code instead of images.

Animating with CSS

Doing this in CSS requires two steps. We first defined our frames using the @keyframes function. After that, we applied the animation to our banner with the Animate function, which defines how the frames will play.

Step 1: Defining The Necessary Frames

The good thing is that the CSS needed to generate each frame of our animation was relatively straightforward, though quite repetitive. We simply incremented the progress count by 2%, and the radius of the ring portion of the gradient by 1px each frame. My co-worker Lee made a quick script to brute-force generate the 51 frames in our loop, which we then placed in the related CSS file.2

I won’t show all the frames here, as there are too many, but here are the first two frames as an example. One thing worth noting is that we actually built the animation with the rings radiating outward, because the math was slightly easier. In the second step, that animation is reversed, to get the desired effect.

Here’s the first (0%) frame of an animation I’m naming waves:

@-webkit-keyframes waves {
0% {
background: repeating-radial-gradient( 15% 50%, circle, #E5F8FF, #E5F8FF 0px, #B8DDED 0px, #B8DDED 2px, #E5F8FF 0px, #E5F8FF 52px);
}

This code may be a little complicated to the uninitiated. It sets the repeating background gradient we want, with the size of the inner ring at 0px, and a total width of 52px. We need to increment the radius of the inner ring by 1px for each frame, to make the rings move a single pixel outward (remember, we’ll reverse it later). So, the second frame looked like this:

2% {
background: repeating-radial-gradient( 15% 50%, circle, #E5F8FF, #E5F8FF 1px, #B8DDED 1px, #B8DDED 3px, #E5F8FF 0px, #E5F8FF 52px);
}

There are another 49 frames, omitted here in the name of brevity, which increment the ring size by one pixel per frame until we hit 100%.

Step 2: Making Those Frames Move

The above code creates the individual frames which will result in our desired animation. However, we still have to define how they will animate. HTML and CSS keeps the animation and the definition of how it plays separate in the name of reusability. Making this animation apply to our banner was then as simple as adding the following bit of CSS of our banner element:

.banner:hover {
animation-name: waves;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: reverse;
}

This last bit of code is equivalent to the playback controls, and defines aspects such as speed, iteration count, and direction. By separating the actual animation elements (the frames and instructions), from the playback controls, you could very easily apply the same animation to different elements, but with different playback parameters.

A good example of how this separation is useful is that our animation frames are built in the opposite direction of how we wanted them to run, so we’ve specified in the playback controls for them to run in reverse. If I wanted it to run the other way, or even ping-pong back and forth, I wouldn’t have to define a whole new animation, I’d just edit these playback controls.

Our End Result

Here’s a slightly modified version of the banner which appeared on our front page. To better show the effect, this version doesn’t require hover to animate:

Stream to Sonos

Airfoil now sends to Sonos’s
AirPlay-compatible speakers

As you can see, our CSS animation got us what we wanted. The concentric rings draw via CSS, and are then animated inward, representing audio streaming to these devices. CSS gradients and animation allowed me to achieve the effect I wanted, while remaining very lightweight. The frames are only about 15KB in total, a pittance for an animation in today’s world of overweight web pages.

I’m very happy with this result. This was an effect I’ve wanted before, but I hadn’t previously figured out the right approach. There’s a good chance you’ll see this technique used again before too long on our site. Perhaps you can make use of it yourself as well!


Footnotes:

  1. Surprise kudos to Microsoft, because the current version of Edge does support this type of animation. ↩︎

  2. 60 frames would have been ideal, to fit into the 60 frames per second most computers display. However, CSS keyframes are defined as percentages, which makes it difficult to define keyframes that don’t fit easily into 100. A bit more math may have made it possible to get the animation to take exactly 60 frames, but 51 frames wound up working quite well, with less work. ↩︎

Rogue Amoeba’s Newest License Window

Rogue Amoeba’s 16th birthday is coming up this Sunday, so it seems an appropriate time to take a look back into the past. Join us for a quick tour of the evolution of our in-app License window.

Our Very First License Window

When we first started shipping software in 2002, our License window was very rudimentary. This image dates Audio Hijack Pro 2’s release in 2004, but we believe it was still using our very first License window design:

As you can see, this window offered only a small “Thank you” message at the bottom. Not long after Audio Hijack Pro 2 shipped, we decided this window should have a bit more flair and style.

The First Flashy License Window

As Quentin detailed when we made our first update, our goal in jazzing up the License window was two-fold. First, we wanted to show our appreciation to our paying customers by providing a little something special when they unlocked the software. In addition, we hoped to reduce the number of folks who lost their license keys, by encouraging them to print them out for safekeeping.

To accomplish these goals, we showed paying customers an old-timey stock certificate with the user’s specific details filled in. Here’s what that original certificate looked like in 2004:


Stately, like Wayne Manor!

Further Iterations

The above design lasted almost a decade, but the License window has since been updated several times.

A Different Certificate

After we hired our first full-time designer, Christa, we eventually got the third iteration of our License window. This started shipping in 2012:


I barely remembered this existed, but I actually quite like it.

However, this certificate lasted less than a year before it was supplanted by something quite different.

An HTML-Based Window

In mid-2013, we undertook a revamp of the entire License window to make it HTML-based. This led Christa to make an update to the window’s content as well. Here’s the least certificate-y version of our “certificate-style” window:


We also moved away from the typewriter font style at this time.

Neale’s First Design

The window looked like that until we finally undertook another update earlier this year. Our current designer Neale took over the reins from Christa back in 2015, and he’s now overhauled the window’s HTML with many small improvements to provide a better experience. While doing this, he also put his own stamp on the window’s look and feel:


We’ve started trending back towards a certificate.

The above design shipped briefly, before we decided to make a larger change.

License Window Number Six!

These days, we really don’t expect anyone at all to be printing out this certificate. Printers are less and less common, and we long ago developed an automated tool enabling customers to recover lost license keys. As a result, showing the actual license code in the window was of minimal usefulness, and we decided to remove it from display entirely:


We also added a fun gold foil seal.

This is the current iteration of our License window, and we think it looks pretty great. However, there’s something you can’t see in a static image. When the software is unlocked, we now show a delightful animation! Click below to have a look:

Digital confetti is by far the best confetti, because you don’t have to clean it up.

See for Yourself

You can experience this extremely brief party yourself, by purchasing any of our great audio tools, then entering your license key to unlock it. We hope you enjoy!

If you’re a loyal user who’s already unlocked our software, don’t worry. You too can join in the fun, thanks to this one weird trick. Just follow these steps to trigger an internal testing function which will let you re-unlock the software.

      1. Be sure you have the latest version of your Rogue Amoeba app (Airfoil, Audio Hijack, Farrago, Fission, Loopback, Piezo, or SoundSource).

      2. Open the application, but make sure the License window is not open.

      3. Hold down the option key as you select “License…” from the application’s main menu.

Now, the License window should look like this, with your key already waiting to be submitted.

Just click “Unlock” and your personal party will begin, then rapidly end. Whee!

That’s All for Now

This is just one way we show our appreciation for your purchase, and it’s a good source of fun for our designers as well. We hope you enjoy this little touch!

Airfoil for Windows 5.6 Adds Support for Sonos

Airfoil for Windows just got another big update, to version 5.6. This update brings support for the new AirPlay-2 compatible 7.8 firmware for Apple’s AirPort Express.

There’s bigger news than that, however. With this update, Airfoil for Windows can now stream audio to all of Sonos’s AirPlay-compatible devices. That means Airfoil can now help stream audio to even more devices. Whatever mix of AirPlay, Bluetooth, and Chromecast devices you have, Airfoil can help you stream audio to all of them at once.


Sonos’s current lineup of compatible AirPlay Hardware

Currently, Sonos’s AirPlay-compatible hardware lineup is the Sonos One, Beam, Playbase, and second-generation Play:5. Of note for Sonos users with older hardware, you need just a single AirPlay-compatible Sonos device to enjoy audio on your entire Sonos system! For full details, see the instructions on this page.

Even More Compatible Devices Coming Soon

With their recent update, Sonos became the first third-party vendor to ship AirPlay 2 compatible speakers, but they won’t be the last. Indeed, updates from Denon, Marantz, and others are now available, and there are many more AirPlay 2 devices coming soon. Much of this hardware is already available for purchase, and firmware updates to enable AirPlay on these devices are due at various points later this year.


More compatible outputs coming soon!

Like the Sonos hardware, these devices are also compatible with Airfoil once their firmware is updated. We’re excited for Airfoil to power audio streaming to even more great hardware!

Get Airfoil for Windows 5.6 Now

With today’s update, Airfoil for Windows supports more outputs than ever before. If you’re new to Airfoil, learn more on its product page. You can download the free trial, then purchase right through our store.

Owners of Airfoil for Windows 5 can update to version 5.6 free of charge, by selecting “Check for Update” from the Airfoil menu. Owners of older versions of Airfoil for Windows are still eligible to upgrade to version 5 at a great discount.

Airfoil for Windows 5.5 Brings Full Chromecast and HomePod Support

We’re now shipping an official version of Airfoil for Windows 5.5. This update adds the ability to stream any audio from Windows to the Google Chromecast as well as other Google Cast devices, like the Google Home third party Cast-enabled players! It also includes full compatibility with Apple’s HomePod devices. With this update, you can stream audio from your Windows PC to more devices than ever before.

We’ve been testing these updates with Public Previews for the last few months. Those previews provided early access to the new functionality, while we worked out the kinks. Now, we’re pleased to provide this update to all users. It’s a free update for owners of Airfoil 5, so be sure to get it now, right from the Airfoil for Windows page.

If you’re still using an older version of Airfoil for Windows (version 3 or lower), now’s a great time to upgrade to the latest.

Stream to Sonos’s AirPlay Hardware With Airfoil for Mac 5.8

We’ve got big news for Airfoil today: Sonos compatibility! With the new Airfoil for Mac 5.8, you can stream any audio from your Mac to all of Sonos’s AirPlay-compatible devices. That means Airfoil can now help you play audio to even more devices. Whatever mix of AirPlay, Bluetooth, and Chromecast devices you have, Airfoil can help you stream audio in sync to all of them at once.

Currently, Sonos’s AirPlay-compatible hardware lineup consists of the Sonos One, Beam, Playbase, and second-generation Play:5. If you’ve already got one of these AirPlay-compatible Sonos device, make sure its firmware is up to date, then update to Airfoil for Mac 5.8 to start streaming any audio from your Mac all around your house.

Of note for users with older Sonos hardware, you need just one AirPlay-compatible Sonos device to enjoy audio on your entire system.

From Sonos’s announcement:

Even though AirPlay 2 is only supported on Sonos One, Beam, Playbase, and Play:5, with any one of these speakers you can listen via AirPlay on your entire home sound system. That means that even non-AirPlay compatible speakers like Playbar or Play:1 can reap the sonic benefits of our AirPlay 2 integration, provided they’re grouped with one of our newer, AirPlay-friendly devices in the Sonos app.

That means that if you have an older Sonos system, you can just add a single new device to get AirPlay compatibility going throughout your home. The Sonos One is a very worthy HomePod competitor, and its $199 price tag is just slightly more than half the cost of Apple’s smart speaker.


More Compatible Devices Coming Soon

Sonos’s recent update made them the first third-party vendor to ship AirPlay 2 compatible speakers, but they won’t be the last. There are many more AirPlay 2 devices coming from Denon, Libratone, Marantz, and more. Much of this hardware is already available for purchase, and firmware updates to enable AirPlay on these devices are due at various points later this year.


More compatible outputs coming soon!

Like the Sonos hardware, we expect these devices will be compatible with Airfoil, once their firmware is updated. We’re excited for Airfoil to power audio streaming to even more great hardware!

Get Airfoil for Mac 5.8 Now

For over a decade, Airfoil has helped stream audio from your Mac to outputs all around your house. With today’s update, it supports more outputs than ever before. If you’re new to Airfoil, learn more on its product page. You can download the free trial, then purchase right through our store.

Owners of Airfoil for Mac 5 can update to version 5.8 free of charge, by selecting “Check for Update” from the Airfoil menu. If you’re an owner of Airfoil 4 or lower, you’re still eligible to upgrade to version 5 at a great discount.

Stay Tuned, Airfoil for Windows Users

Fear not, Windows users. We’re hard at work on an update which will add Sonos compatibility to Airfoil for Windows as well. Stay tuned for more news in the near future!


Update (September 13th, 2018): With version 5.6, you can now stream to Sonos devices with Airfoil for Windows as well! Be sure to update to the latest version.

Our Software