Animations with SASS and @while

A few months ago I was working on a looping Wi-Fi signal animation for Karma. Initially I wrote a bunch of SASS with a few mixins, until I discovered the @while directive which repeatedly outputs a given number nested blocks of styling. Resulting in 20 lines of SASS that generates as many animated signals as you could possibly want and automating the math as well.

See the animation in action on codepen.io. And let's get started.

Markup (HAML)

First, we're going to need some markup.

Styling

Start with positioning the signals.

Make the signals look like signals.

@while

The value on the first line (8) is the amount nested blocks of styling I want SASS to output. Line 7 makes sure each block gets its own unique class starting at ".signal-8" down to ".signal-1".

Size and positioning

The width, height and margin of each signal is determined by the "$size" variable which increases in size for each '$signal' by 40 pixels starting at 20: 60, 100, 140, 180 and so on.

To position each signal in the centre of the wrapping element simply split the "$size" value in half and set it as a negative top and left margin.

Fading each signal

The bigger the signal gets, the weaker it gets. To achieve this effect simply decrease the alpha value of the border and box-shadow rgba color by 10.

Delaying the animation

In order to make the signal animation look convincing each signal needs a longer delay. The following calculation increases the delay of each signal by .3s.

It's not perfect

There are still some vendor prefixes in this example. That sort of defeats the purpose of SASS, I know. But I want to focus completely on the @while directive and not get distracted with custom mixins.

The possibilities with @while are endless. A downside about this particular animation is looping opacity, which is pretty heavy on the CPU. But there's a ton of other neat stuff @while can be used for. If you've made something cool using @while, let me know on twitter!

Take a look at the compiled HTML & CSS.

« Back
Michiel de Graaf

I design interfaces, craft websites and write cascading style sheets & hypertext markup, previously lead designer at Karma. This is my blog.