Export SVG Animations for the Web with Snap.SVG Animator

06-01-2016

cover

Animate.CC is primarily a vector animation tool. SVG is the vector language of the web. So it seemed to make sense that Animate would have the ability to create vector animations you could then export and run natively as vectors on the web. This was the vision behind Snap.SVG Animator. Snap.svg Animator is an open sourced plugin for Animate CC that exports animations for the web rendered in SVG.

It uses the Snap.svg JavaScript library to dynamically draw SVG content at runtime. Snap.svg is a JavaScript library created by Dmitry Baranovskiy, who also created Raphaël.js. It provides a simple API for writing and manipulating SVG content in the browser. Snap.svg was written to focus on newer features of SVG supported by modern browsers without having to fallback to legacy browser support. It supports advanced features enabling rich dynamic SVG graphic effects.

The Snap.svg Animator plugin can be installed through the Adobe add-ons portal. If you have syncing enabled through the creative cloud this will automatically install it directly into Animate CC.  From here you simply create a new “Snap.svg Animator” document type and begin creating content s you would normally. Publishing your content then generates a boilerplate HTML file along with all the assets you need, giving you an example of how to embed your animation into a webpage.

Note: If you are having issues installing the Snap.svg Animator plugin from the Adobe add-ons portal, you can download the plug-in from here and install using this utility for Windows and Mac.  To know more about this utility please refer here.

interactive

The plugin supports most basic animation features in Animate CC such as images, shapes, and tweens. It also supports masking as well as gradients. Recently we added scripting support so you can add scripts to keyframes inside the actions panel. Scripting is done with JavaScript and the Snap.svg API.  The following video shows some examples of the kind of interactive capabilities that can be achieved with scripting in Snap.SVG Animator.

You can add instance names to display objects in the properties panel and then access them in the scripts panel using the `this` keyword to get the current timeline’s instance.  The instance name of the children will be a property of their parent timeline’s instance.

var mychild = this.mychild;

Then you can call typical methods on movie clips, such as `stop();` or `gotoAndPlay();` A full description of the current commands available can be found in the project’s github wiki. You can also leverage some Snap.SVG methods directly on the movie clip, like `click`, `mouseover`, `mouseout`, and more.

recording

The plugin also supports external scripting. By defining linkage names for movie clips in your library you can access them through the generated javascript. You can then instantiate the exported movie clips in JavaScript and add them to the main stage’s timeline. This gives you the freedom to code in the IDE of your choice rather than in the actions panel.

You can learn more about the plug-in, fork it, submit bugs, or feature requests at the project’s github page. Using a timeline based animation tool in conjunction with JavaScript really empowers designers and animators to do amazing things with SVG.

Recommended Articles