Adobe Creative Cloud

June 1, 2016 /Extensions /

Export SVG Animations for the Web with Snap.SVG Animator

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.

Extensions

Join the discussion

  • By Marjann - 9:12 AM on June 1, 2016  

    I dont know anyone who have successfully installed the plugin.

    • By Ajay Shukla - 9:18 PM on June 1, 2016  

      Hi Marjann,

      What specific issue are you facing? It may take a little while for the plug-in to show up through the creative cloud update. You will also need to quick Animate and start again. Please let me know if you are still facing issues.

      Thanks,
      Ajay

    • By Jeremy Batts - 1:44 PM on June 28, 2016  

      Just installed it with no issues. Sys tray manager popped up and prompted to click to complete install. Did that restarted Animate CC and everything is as expected.

  • By Bryan Rieger - 8:27 AM on June 2, 2016  

    Installed it several times, but the new “Snap.svg Animator” document type never appeared. Only got errors trying to export from SWF, Canvas, etc. 🙁

    • By Ajay Shukla - 11:47 PM on June 2, 2016  

      Hi Bryan,

      What errors are you getting when you try to install the plug-in.

      Thanks,
      Ajay

  • By Bryan Rieger - 5:27 AM on June 3, 2016  

    No errors at all. The (rather confusing) panel is installed, but the document type.

  • By Bryan Rieger - 5:28 AM on June 3, 2016  

    …the document type (SVG) is not to be found.

  • By Jake Koprowski - 4:09 PM on June 8, 2016  

    I’m getting the same issue, installed the plug in but it never showed up as a file type.

    • By Jake Koprowski - 4:19 PM on June 8, 2016  

      OK I figured it out, make sure you have file sync on, and try uninstalling/reinstalling it once sync is turned on.

      • By Ajay Shukla - 9:26 PM on June 8, 2016  

        Great to know this. You can also try the process I outlined in the embedded Note that allows you to install the extension using a downloadable utility.

        Please let us know your experience working with the plug-in.

        Thanks,
        Ajay

    • By Shilkumar - 1:52 AM on July 19, 2016  

      I’m getting the same issue, installed the plug snap.svg in but it never showed up as a file type.

      • By Ajay Shukla - 2:01 AM on July 19, 2016  

        You need to restart Animate after installing.

  • By Bryan Rieger - 9:36 AM on June 9, 2016  

    Unfortunately even with sync settings enabled this still doesn’t work for me.

  • By Bryan Rieger - 9:42 AM on June 9, 2016  

    You know, I get the whole ‘you can build exporters for every/anything’ but I’m finding the whole Adobe extensions thing REALLY flakey. I’d much rather have features like SVG animation supported added natively within the application itself rather than have to jump through all of these ‘hoops of disappointment’.

  • By Dominique Girard - 11:03 AM on June 10, 2016  

    Same here. Total flop. Tried seven different ways to install this dog and nothing. You did Snap right; why can’t you NOT make all of your products progressively worse every year?

    • By Ajay Shukla - 3:22 AM on June 16, 2016  

      Hi Dominique,

      Apologies for the issues you are facing. While we are getting this fixed, have you tried the alternate mechanism we added in Notes in the blogpost.

      Thanks,
      Ajay

  • By juan - 7:06 PM on June 12, 2016  

    Once I have echo the content, and export it to svg, logo incorporating animation to a website created in wordpress using visual composer, and in addition to that which is responsive.

    • By Ajay Shukla - 3:23 AM on June 16, 2016  

      Hi Juan,

      Can you please restate the problem you are facing.

      Thanks,
      Ajay

  • By Brad - 9:40 PM on June 13, 2016  

    I see that it creates the svg in the body of the doc. How would I go about specifying where I want the svg to generate. If I wanted it in a specific div, what would I do?

    • By Brad - 6:32 AM on June 14, 2016  

      I found the answer in the wiki on GitHub.

      After comp is defined: comp = new SVGAnim(…..);
      Add the following line: container.appendChild(comp.s.node);

      Just replace container with the page element you want as the parent.

      Example: document.getElementById(“maincontent”).appendChild(comp.s.node)

  • By Angel - 12:52 PM on June 16, 2016  

    Awesome article CJ,
    I’ve been looking everywhere to find out how to access a variable within a movieclip from the parent timeline in AnimateCC (not edge) lol.
    For example: this.myMovieClip.myVar
    In myMovieClip I have an Actions layer where i defined myVar.

    Why isnt this working? Am I missing something seems trivial. Any help would be AMAZING.
    Thanks, Angel.

    • By CJ - 9:33 PM on June 21, 2016  

      Hi Angel,
      Thanks for trying it out. I tried doing it the way you described and was able to access the variable fine. It may depend on when the variable is defined in the child movieclip’s timeline vs when you’re accessing it on the parent. If you’re still having problems or think there is an issue with the plugin feel free to submit an issue on github.

      Thanks,
      CJ

  • By Bryan Rieger - 6:14 AM on June 18, 2016  

    Upon having no luck with the add-on via the portal I decided to give it a go via the Mac Utility (Manage Animate CC 2015 Extensions) and the .zxp package. Somewhat unsurprisingly I was presented with the following when trying to install via this other method:

    “Compatible application not found. Please install compatible Animate CC Application and try again.”

    (screenshot) http://i.imgur.com/JytpSfx.png?1

    Of course, I do have Animate CC installed to the default location.

  • By Bryan Rieger - 1:48 PM on June 21, 2016  

    Just a quick follow-up on this. I did eventually get it working. Apparently it’s not enough to have sync enabled within Adobe Animate, you also have to have it enabled within the Creative Cloud app itself. Once I correct that issue it all worked as expected. 🙂

  • By Gerard - 7:46 AM on June 22, 2016  

    Hey CJ (great plugin btw) is there anyway to prevent variables being fired on every frame?

    Here’s what I’ve got but the initial variable is set back to 0 on every frame.

    var stage = this,
    pausePlay = this.playPause;

    var playback=0;

    pausePlay.click(function(){
    if(playback==0){
    stage.stop();
    pausePlay.gotoAndStop(2);
    playback =1;
    }
    if(playback==1){
    stage.play();
    pausePlay.gotoAndStop(1);
    playback =0;
    }
    });

  • By steen hjalmar larsen - 6:54 AM on July 1, 2016  

    My main timeline running all the time
    and overwrites all variables which I define
    is it an error in the program?

  • By rklump - 2:56 PM on July 5, 2016  

    Hi all,
    how would you go about putting multiple snap.svg animations on the same page?
    thanks fer-any-guidance!

  • By rklump - 9:55 AM on July 6, 2016  

    hey how can you add a class to json file, so you can style with css???

  • By rklump - 2:42 PM on July 6, 2016  

    hey hi again,
    any way to make the view box responsive,
    fps = 24,
    width = 100%,
    height = 100%,
    AJAX_req;

  • By Technokrats.in - 3:23 AM on July 8, 2016  

    Is SVG animation is supported on all browsers! ?

  • By John - 7:38 AM on July 25, 2016  

    I’m new to this plugin and I simply want someone to explain in a “for dummies+-fashion, each step necessary to place one of these animations in Dreamweaver. There’s a workflow for normal Adobe Animate importing, but I don’t see anything that explains how to get this working using this new plugin. Please help! Thanks!

  • By Davi Lima - 1:39 PM on August 8, 2016  

    I also couldn’t install, is there a FAQ somewhere? Running Windows 10 + Animate CC 2015.2, both in Portuguese Brazilian. Should language matter? I tried 4 methods: Creative Cloud, WinUtility, Extension Manager CC and ExManCmd_win.

    • By Mohanaraj C S - 10:32 PM on August 8, 2016  

      Hi Davi,
      There is an issue with Extension Installation in general where your OS language is different than your application language. Extension Manager team is working on it. Mean while you can just copy the contents from the below folder
      C:Users(your user name)AppDataLocalAdobeAnimate CC 2015.2(OS locale code)ConfigurationCommands
      to the following folder
      C:Users(your user name)AppDataLocalAdobeAnimate CC 2015.2(app locale code)ConfigurationCommands

      Thanks!
      Mohan

  • By Tom - 2:14 PM on September 6, 2016  

    still unable to install. Win 10, Animate cc 2015.2 and my os andadobe are both in english. Why won’t install? Getting the failed to install make sure vaild manifest and at least one product recognizes…

    • By Ajay Shukla - 7:58 PM on September 8, 2016  

      Hi Tom,

      I will have someone reach out to you.

      Thanks,
      Ajay