Creating a vector animation for the web in a post-Flash world

SVG combined with Javascript offers a responsive and resolution independent platform to create interactive animations for the web.

By Annie Wilson.
Originally published at This Little Duck.

Despite the hoard of horrible Flash websites in the 2000s, Adobe Flash, the program, was a great authoring tool for animation — I don’t think anyone is complaining about Flash being dead (remember splash screens?) but one thing we miss a little bit is being able to easily create small, resolution independent animations for the web.

What are the options for animation on the web in 2017?

Video

Pros: Animation can be as complex as your animation software allows.
Cons: Requires the user to trigger playing the video on mobile, limited interaction, not resolution independent.
Example: helloheco.com

CSS

Pros: Good performance, supports 3D shapes.
Cons: Limited bezier easings, motion path not (yet) supported.
Example: Species in Pieces

Canvas

Pros: Fast, interactive.
Cons: Not resolution independent (raster based).
Example: Playkot

WebGL

Pros: 3D, hardware-accelerated.
Cons: Difficult to make responsive.
Example: Interland

SVG

Pros: Interactive, responsive, resolution independent (vector based), supported on all modern browsers, can be styled with css.
Cons: As only simple animation can be achieved using css to animate svg, a javascript library will be required for complex animation.
Examples: Cuberto (Snap.svg), Timber (Bodymovin), On the Grid

Sarah Drasner did more in depth comparison of animation technologies at CSS Tricks.

Using SVG for animations but getting lost in Javascript

If you start googling for “animating SVG” you’re going to find a bunch of links to various javascript libraries. These are great tools but they’re so low-level that to animate anything mildly complex would be difficult for a designer/animator, you’d need to do lots of programming.

Thankfully there are some great plugins that build on top of these libraries and allow designers and animators to use tools they’re familiar with and export the results to an SVG/JS snippet that you can copy and paste into your website.

The best design tools for creating SVG animations

The two options we found that were most useful were:

• Adobe After Effects + Bodymovin
• Adobe Animate + Snap.svg Animator

If Adobe Animate looks familiar you’re not mistaken, it’s the design tool formerly known as Adobe Flash Professional.

We chose the combination of Adobe Animate + Snap.svg Animator due to the easy integration with Illustrator and our familiarity with the previous Flash animation setup.

Creating a simple vector animation with Adobe Animate and Snap SVG in 4 easy steps

Step 1: prep your assets in Illustrator

Prep your assets in Illustrator or your preferred vector illustration tool. Because we’re using Adobe Animate we can easily import layered vector AI illustrations and have individual shape elements available to be animated. I’ve chosen the message bubble element of our homepage illustration as an example.

Ensure you simplify your shapes as much as possible by combining shape paths and outlining any text elements (Snap.svg does not support embedded text) as this will make them easier to manipulate in Animate when you import them.

Install the Snap.svg Animator plugin from the Adobe website and create a new SnapSVGAnimator canvas inside Adobe Animate to start animating.

Import your vector assets to your Animate scene (I selected the illustration directly in Illustrator and then used copy and paste into Animate). The first thing you will find is that all your separate layers have been pasted into the one frame in the timeline, however each shape is still selectable individually. If you had any grouped elements in your illustrator document these will remain grouped.

Step 2: Animations

The animation in this example has 3 different moving parts — the question bubble, the reply bubble and the reply dots. To animate these parts I converted each separate moving shape to a symbol and used a simple motion tween on each element to animate. In the sample below you can see the dots stagger in on the timeline however as the bouncing dot animation happens inside the individual dot Movie Clip symbol so you will only see this when you preview the animation.

To preview your animation save your document and select Test from the Control menu, this will open up a browser window with your animation.

Step 3: simple interactions

The animation is ready to use at this point, however I want to add some additional interaction so that the animation is only activated when hovered over. The Snap.svg plugin actually allows scripting within Animate CC, you can see the available commands here.

Move the entire animation into it’s own Movie Clip symbol (you can do this by creating a new Movie Clip symbol and then pasting in the frames from the scene). Then inside that symbol create a new layer (I’ve called this layer ‘Trigger’) with a transparent rectangle shape that covers the entire canvas. I found this to be the best way to create an even hover area as sometimes a hover event can be triggered multiple times as your mouse rolls over the various moving shapes.

With the first frame of the trigger layer selected, open the Actions panel and enter the script this.stop();. This will stop the animation on the first frame.

Navigate back to your scene and select your Movie Clip symbol on the stage to give it a name in the properties panel. I’ve called my symbol ‘messageClip’.

With the symbol still selected, open your Actions panel and add the following snippet:

var messageClip = this.messageClip;
messageClip.mouseover(function(){
  messageClip.gotoAndPlay(2);
});

This will trigger the animation to start playing from the second frame on hover. You can test this in the browser using Control > Test.

Step 4: Exporting to HTML

Selecting File > Publish will generate the assets you need to embed your svg animation in your website, all of these files can be found in the directory your .fla file is saved in.

You will need to link to snap.svg-min.js and SnapSVGAnimator.min.js on your page. The json file is where all the information about your animation is stored. If you make changes to your animation in the future, this is the file you’ll need to update.

From the generated html file you can copy out the entire script portion and include it on your page. This will append the generated svg to the bottom of your html document which is not entirely ideal, but you can add your own modifications to the script using the Snap.svg API.

For the illustration on our home page, I created a div where I wanted the svg animation to sit on the page, and then appended the svg to that element by adding the following to the script that was generated by Animate.

function handle_AJAX_Complete() {
  if (AJAX_req.readyState == 4 && AJAX_req.status == 200) {
    var container = document.getElementById("svgContainer");
    json = JSON.parse(AJAX_req.responseText);
    comp = new SVGAnim(
      json,
      width,
      height,
      fps
    );
    container.appendChild(comp.s.node);
  }
}

The result

Check out the animated hover state on the home page illustration at https://thislittleduck.com.

I am a product designer with 6+ years experience creating beautiful product experiences — leading products through concept development, prototyping, branding, visual design and front-end development. I have a keen interest in emerging technologies and the role great design plays in everyday life.

I thrive in small teams with big ambitions and passion for days.
If that sounds like you, hit me up for a chat!