To showcase what can be done with Snap, Yohei Shimomae and I designed a display ad in Illustrator that I put together and animated using Snap.
So I want to walk you through the process we used to create it.
To speed up rendering and consolidate loading I set up the ad with all the SVG in the document already. Most of the different sections are in groups that have
After the devices rotate and transition between each other, there is this zoom and burst effect. The SVG for the burst was taken from Illustrator but you'll notice it seems to expand outward. This effect is achieved by using a circle to mask the inside and then scaling it up, while playing with the opacity of the lines. While this is happening we scale the heart up with a nice elastic bounce.
When the heart resolves it does a circular wipe. This is done with a clip path applied to the shape that animates around. We do this by defining the path with a little trigonometry that draws the circumference of the circle reducing at an interval.
Throughout the ad there is an animated background of a low polygon mesh that oscillates with subtle lighting effects. This was achieved using the Flat Surface Shader library found here: http://wagerfield.github.io/flat-surface-shader/. This gave us the basic mesh animation effect, but we wanted a transition that rippled the color across the faces to create the final resolve. To do this I had to make a custom version of the library that allowed individual face changes. I then loop over the faces to create the ripple color changing pattern.