Export SVG Animations for the Web with Snap.SVG Animator
by CJ Gammon
POSTED ON 06-01-2016
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.
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.
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.
Topics: Insights, Creativity, Design
Products: Creative Cloud