One of my favorite events of the year, BarcampNola – the two-day, tech-oriented New Orleans “unconference” – is coming up July 13 & 14. It’s weirdly inspirational.

If you want to share about a topic you’re passionate about, want to learn from others, or just want to meet the tech/creative community in town – you should probably register. Afterall, it’s free.

BarcampNola returns for its 6th year, of which I’ve participated in some fashion since year 4 (also my first year in New Orleans). This year I can’t really take much credit, but along with Joe Ellis, George Mauer, and John Clark we built BarcampNola’s unbearably ridiculous website.

The intro section of BarcampNola 6's website.

The site mostly features John’s fantastic illustrations, but there are some cool things going on behind the scenes too. Apparently most all browsers don’t like large gifs, which are littered throughout the site. Because the gifs are each over 1mb, browsers fell to their knees. Joe came up with some sprite animation solutions that greatly reduced the load. Additionally, we only animate bears within view. My poor iPhone 4 still could not handle the amount of awesome that was animating on the page.

I investigated the timeline via Chrome’s dev tools to see how paint times were impacted. Javascript’s setTimeout & setInterval functions were causing some interesting lag, and the constant manipulation of the sprite’s background-position coordinates also greatly impacted render framerates. The worst offender was the inconsistency between the slow and fast renders, creating a jaggedy/jumpy experience as you scroll the page.

Because the context of this site is open to experimentation I thought CSS keyframe animations might be a good solution. I used Sass mixins to generate all the css necessary, which can be quite verbose.

There is at least one downside to this method: Older browsers won’t display an animation, but rather a static image of the first frame. I can live with that.

We now have smoother, more consistent sprite animations. I’m sure there are better ways to implement this – I’d be happy to hear suggestions.

Check out this Pen!