Each year at Zoocha, we try to do something for Christmas for our clients, even if it's just a Christmas card (see below for our effort from a couple of years ago). This year we wanted to do something interactive, and webby, as that's our business really.
I'm sure many of you will have seen Species In Pieces, but if not check it out as it's pretty amazing. The designers thought it would be fun to do something inspired by that concept but with a Christmas-y theme. Also we were inspired by the Polylion CodePen that was posted on CSSTricks. Hence, a Piece of Christmas was born.
The idea behind both the original, and our version, is that each shape is comprised of 132 triangular polygons, that shape-shift to form the new shapes. In hindsight 132 was quite a lot, as we had some performance concerns (which for the most part seemed to be unfounded)
As with all good projects this started with a prototype. We had two choices for how we wanted to animate the shapes: Greensock's GSAP or Snap SVG. So we built a prototype with a simplified shape, with each library to see which was easier.
The first problem was getting the shapes into code. The polygons were SVG elements, but as we were moving the existing pieces rather than creating new ones we needed to pull out the points for each one and store them in our JS. The prototypes initially did this in code as the page loaded, but for the final version we went for some separately processed JSON files that were loaded in.
GSAP is an incredible platform, rising out of the Flash-era where it was lauded for silky smooth animations, and a great timeline system. The Javascript version doesn't disappoint either and all the animations are really performant, plus the library itself is might lighter than things like Angular, React, etc. It did prove more complex to achieve what we wanted though: as is often the way with libraries the way it works wasn't quite what we wanted.
Snap is a lightweight library that claims to make working with your SVG assets as easy as jQuery makes working with the DOM.
In the example of what we were doing it did indeed. Animating a polygon is as easy as this:
var polygon = document.querySelector('.my-polygon');
polygon.animate({
points: '20, 100 200, 80 60, 60',
easing: mina.easein
}, 500);
Just like jQuery! I say "it's as easy as", but in fact animating polygons like that isn't quite so straightforward: the points values are neither an array nor a number; instead it's pairs of cartesian co-ordinates so just calling `animate` threw errors. Thankfully (oh joy for Open Source software!) someone had hit this problem and provided a patch which had us up an running.
In case you haven't guessed (and congratulations if you've reached this point!) we went with Snap. Once the first shape was animated, it was just a case of plugging in the rest of the shapes, and away we went.
There's also some festive noise in the background, provided courtesy of the Web Audio API and a little MP3 file. At first we were concerned that this could add a lot to the page weight and load times, but turns out these fears were also unfounded!
Thanks to only using the Snap library, and not including things like jQuery or anything else, we kept the overall page weight down to a touch over 200kb. As for browser support, it works in IE9 and above, as well as all the latest browsers. It even works fairly well on mobile (though of course on older phones it was a bit slow).
One of the frontend devs has been trawling under the hood so if you're interested in checking out the nitty gritty, have a read of the links below: