Review: Snap.svg Animator plugin for Animate CC

By Matt Lipman     December 9, 2017

Community is important in encouraging the adoption of software or tools in general. To join this community, you need to have Adobe CC or Animate CC and then go out of your way to install a plugin which may prove to be difficult or time-consuming. Limiting access to a community is a great way to prevent it from taking off. The installation process is an obstacle, as it didn’t work for me and countless others. You can get an idea of how it took me nearly 2 hours troublshooting the Snap.svg Animator plugin to work on Animate CC.

Knowing a little about my background will help you understand my experience with the plugin. I made flash games in 2008-2010, mostly with ActionScript 2.0, though I did make at least one game in ActionScript 3.0. I am familiar with flash, although I have only used the program very rarely since then.

Somewhere in 2014 I tried out the JavaScript library Snap.svg to make a puzzle. I didn’t find it too hard to get started with minimal JS experience, as the JS language has many similarities with ActionScript.  If interested in this route, I suggest checking out this Snap.svg resource to help you get started. It is tricky animating without a visual interface and that is exactly why I got excited about the promise of the Snap.svg Animator plugin that works on Animate CC (Originally Flash).

What is the ultimate goal for users of Snap.svg Animator? On one extreme, there will be designers who simply want to animate SVGs and this group can output to other formats. The rest of the spectrum includes designers who want some level of interactivity, and that will require coding.

When I first opened my first canvas, I fumbled around to create a shape and turn it into a movieclip, but my past knowledge came back, well enough for basic shortcuts. After testing the ‘movie’ using ‘ctrl + enter’ my shape displayed. When I added a little code, nothing would display. It wasn’t clear what language I should be using. Under ‘edit > preferences > code editor’ you have the option to choose ActionScript or JavaScript, the former is the default. I now believe this selection has no effect. I had to follow the one scripting Snap.svg Animator tutorial that I could find made by the plugin developer, who mentions coding is done in JavaScript. It took me a while to realize I needed to use ‘this.stop();’ instead of ‘stop();’ to stop the animation on a frame. The limited number of resources for this plugin make it hard to Google how to achieve what I set out to accomplish.

I spent two days learning basics and after a bit of frustration of not getting far, I at least saw the path to get this working. However, I completely lost the initial excitement. SVGs are fairly new, or at least having the compatibility from all major browsers is new. As with any new technology, there is a huge learning curve and best practices are being worked out. Why should I invest my time learning to use this software, when Adobe isn’t fully invested?

I am currently working on including inline SVG code and applying animations through CSS. While JavaScript will inevitably be needed for complex interactivity, CSS animations prove to be a great way to understand optimizing animation code. The Snap.svg Animator produces excessive code, even for simple tasks.


Obstacle Recap:

  • Plugin installation troubles
  • Community user-base restricted by software and plugin
  • Limited documentation, FAQ, and tutorials
  • Bulky file size

Animate CC and Snap.svg (the JS library) are solid tools. This review simply criticizes the integration needs work if it Adobe wants to encourage a community of enthusiastic Snap.svg Animator users. While I am not uninstalling the plugin yet, in my quest to make use of SVG on the web, I will be looking elsewhere.

How to install Snap.svg Animator for Animate CC 2018

By Matt Lipman     November 11, 2017

TL;DR Try this:

  • Restart Animate CC after making a change
  • Ensure sync settings are on and not paused
  • Reinstall Animate CC and snap.svg plugin
  • Manually install through Manage Extentions Utility
  • Restart computer

A big obstacle many face, as evident in the Snap.svg animator reviews and comment sections, is with installing the plugin. I experienced this first hand and spent two frustrating sessions getting the plugin to work. I have Adobe CC, and acquired the snap plugin on the adobe website, which didn’t give me the option to create a new “SnapSVGAnimator (Custom)” document. Several attempts to restart the program and my laptop didn’t change a thing, same with my efforts to uninstall and reinstall the plugin.

I went through Adobe’s troubleshooting, which thoroughly takes you through things such as checking your internet connection is working (step 1). Oh, it’s my internet Adobe? How did I just access this webpage?! The “more” useful suggestions have you to avoid old versions of Extension Manager CC, ensure sync settings are on and not paused, and ultimately lead me look else where for help.

Then I tried to install the plugin with the manual approach. I was very hesitant about this approach, because who wants to install unfamiliar software to install a plugin onto expensive installed software that you pay for monthly? I only pressed on because the instructions came directly from Adobe. Download and install the Manage Extensions Utility, and download the  ‘.ZXP file’ on the plugin’s GitHub page. Adobe explains how to install the .zxp file to get Snap.svg Animator working. It didn’t work. Even after restarting Animate CC and my computer. Great.

My last ditch effort was to uninstall the software and plugin, and install both again. This is the moment it started working for me. Finally. What did it? IDK. Maybe I should have uninstalled and reinstalled Animate CC in the first place, but I imagine this did not work on it’s own. I already updated the software earlier before installing the plugin, which upgraded me from Adobe Animate CC 2017 to Animate CC 2018. I was up-to-date.

Hopefully you got the plugin working, and much quicker than I did. I had to search for these various resources. If not, I suggest giving feedback on the plugin page, because a poor installation process discourages designers from giving software a try. If Adobe wants to take browser SVG animation seriously, they should get behind improving the installation process.