Adobe recently open sourced Snap, a javascript library for manipulating Scalable Vector Graphics (SVG) on the web. The library was written by Dmitry Baranovskiy, who wrote the popular Raphaël library for vector graphics on the web. The reason for writing a new library was that Raphaël was written at a time when older browsers like IE6 didn't support SVG, but rather VML. This made using cross browser vector graphics very difficult, but Raphaël provided an API that would draw SVG where supported and VML where it wasn't. However today the landscape is quite different and SVG is the accepted standard in all modern browsers. SVG has also improved a lot supporting new useful features that can't be achieved with VML. This presented the need for a modern library that focuses on the latest SVG capabilities without the overhead of backwards compatibility for VML and this is where Snap comes in.
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 opacity: 0 and are revealed when necessary. Most of our animated elements have javascript objects so that we can trigger animations and transitions as needed.
When designing the ad we worked in Adobe Illustrator. Because Illustrator is vector it gives us a good idea of the final output. It also allows us to export SVG shapes to be used in the ad itself. The heart shape you see in the beginning was drawn in Illustrator and then exported to be incorporated into the SVG document. We used SVG text for the text layout and centered them, using the Illustrator file as reference. Then we use transforms to animate the position when the devices animate in. The devices were drawn in illustrator, but in order to animate between them correctly we used the Illustrator drawings to get the correct sizes and proportions we wanted, then we created an object in javascript so we could easily call methods on it triggering these transitions. The methods would set the screen and device size based on the dimensions we got from Illustrator, but also allow scaling and rotating for transitions. The heart has a javascript object as well, with similar methods for scaling and animating the color.
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.
The rest of the animations are mostly transforms or opacity fades. You can learn more about Snap.svg at snapsvg.io. You can find the source for Snap and this ad in the demos on github.
![github]("https://github.com/adobe-webplatform/Snap.svg"){kind=link}