Using CSS Animation to tell the SitePoint Christmas Story

If you’ve been following our 2012 SitePoint Christmas Sale, you may have noticed the winterland story unfolding in the background (desktop version only). So far, we’ve had everything from ice skaters to dancing bear to leaping fish to a smoking locomotive — with plenty more to come.

4 screenshots from Xmas.sitepoint.com

Today we’re launched a new ‘story mode’ for anyone who just wants to see the story stream. Use the following URL to see the current day’s story minus the normal sales page for that day.

Link: http://xmas.sitepoint.com/story/css

You can also link directly to specific days by adding “#day/” and the day number. For instance, this link will take you straight to day 14: http://xmas.sitepoint.com/story/css#day/14

The lowdown on the 2012 Design

While past years have been mostly a two person build team (shout out to Dan), this year we have had a few more resources up our sleeves.

The awesome concept, layout and illustration are the brainchildren (is that a thing??) of Harley Alexander. Harley’s original design included a hemisphere switcher, that let you switch to a sunny, warm, southern hemisphere Christmas view. Ice skaters became rollerbladers and snowball battles became water fights.

Sadly, we had to let go of that idea early on. Shipping dates aren’t really negotiable with Christmas approaching and there are no clever coding tricks can get you around the issue of doing twice as much illustration — as much fun as that would have been.

As he explained in this post, Michael Sauter built our backend. Ian Coleman made it all the bits work together and Jude Aakjaer managed both the team and the project.

My personal contribution has been the animation. I love experimenting with this stuff and the Christmas sale has been the perfect place to workshop some new ideas. No, it won’t work on non-current browsers. Yes, it’s also true that some scenes may push your CPU a little. That’s ok.

My challenge was:

  1. to push what pure CSS3 animation could do without relying on JavaScript
  2. to find as many different CSS animation styles and technical approaches as I could

So far, there have only been minor exceptions to those rules. For instance:

1) The dogsled is positioned with CSS (position:fixed) and uses CSS transitions to move it into place. However we need to add and subtract a class to make the dogs trot.
2) You’ll also notice the smoke on the train animation on days 8, 9 and 10 detaches from the train as soon as it leaves the smokestack – just like real smoke! We need a smidge of JS to calculate where the chimney is relative to the track, and then place each new puff of smoke relative to that position on the track – rather than the train.

Essentially, we’ve used JavaScript as an animation toggle, rather than the animation engine.

Anyway, if you’re interested in the CSS nitty-gritty, come and say hi in our Christmas CSS Podling group. I’ll be hanging around there, answering questions and generally getting your feedback on what worked best.

I’ll also be writing up some longer animation how-to post in the new year, so keep an eye out for those.

In the meantime, check out each new day and let us know what you think.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.worthdesigning.com.au worthdesigning

    Nice job – pity the hemisphere switcher had to go.

    I get sick of seeing snow and snowmen at Christmas on the net when it’s Summer here. It has never snowed anywhere I have lived so to me that would be freaky!

    But AWESOME job on the CSS – love it.

    • Alex Walker

      Yes, it was with a heavy heart that let go of that idea..

  • http://goo.gl/T2nUD Wilbur

    Why is today’s deal the 19th if today is the 17th?

    • http://www.onsman.com Ricky Onsman

      Because the Sale didn’t start on the 1st of December. The 19th day of the Sale is the 17th day of December.

  • Tim

    A interesting idea. Unfortunately, the illustrations are so bad they are taking away from the coolness of it.

    • http://www.onsman.com Ricky Onsman

      That’s a interesting perspective.

  • MikeL

    I liked the simple illustrations. Perfect for a subtle background effect. Not too overbearing.

  • Jeff

    Excellent job. I was entertained by the visual story as well as intrigued by how it was done. Thanks for posting a behind-the-scenes information.

  • lowell

    No hemisphere switcher but at least the penguins are from the other hemisphere.