Making animations for the web: how to find the perfect tool


Making animations for the web: how to find the perfect tool

When you are working as web designer, you’ll probably stumble into the situation that you get asked to do an animation for the web sooner or later. As I lately did some animations at work I discovered that it isn’t that easy to decide on the best tool for web animation.

The questions I asked myself when I started were:

  1. Do I want to code the whole animation by myself?
  2. If yes, do I want to do with HTML and CSS?
  3. If yes – is it even worth the time to do it all manually, or should I use a tool, which generates the code for me?
  4. If I am going to use a tool, which ones are out there and do they produce good enough code I can use? Or should I just stick to Adobe After Effects and do no coding at all?
In this blog post I will share my learnings about animation for the web with you. A spoiler upfront: There is no perfect solution – but there are good enough solutions for different projects. The example animation I’ll share with you are all coffee related, as I am working at Cropster – which is a company that offers software for the specialty coffee industry.

First approach: Adobe After Effects

As in all projects, time matters – and since my first animation project was on very short notice, I decided to do it with Adobe After Effects. The task was an animation for the international coffee day: visualizing the journey of coffee, from the coffee farm to the consumer.

Advantages:

  • If you have a basic understanding of the Adobe products you can get started relatively quickly
  • You can import assets from Adobe Photoshop and use the layers as objects to animate
  • You have a timeline based UI – which makes it easy to to create your animation
  • You have a preview – you always see whats going on

Disadvantages:

  • You need to have a basic understanding of the Adobe products, if you are a newbie, it takes you probably longer to get to know Adobe After Effects than other tools
  • You can only export video files
  • You cannot directly export GIFs (which is the format you might use for the web)
  • You need to convert the generated video file into an embeddable GIF – this might end up not beeing fully sharp; this bothers me especially on Retina displays

Export tip: If you are working with Adobe After Effects, export your file as usual Quicktime .mov file. Then re-import this file in Adobe Photoshop – then you can export it as GIF.

Conclusion: I would recommend using Adobe After Effects if you have a project that only has a tiny time budget and you are already familiar with the Adobe products and the timeline based UI.

Cropster animation for international coffee day with Adobe After Effects

Second try: Plain HTML and CSS

After I did my first animation project with Adobe After Effects, I was happy with the result, but not totally satisfied. When I got asked to do a second animation, I thought that I wanted to make it better. The thing that bothered me the most, was actually that the GIF was so pixelated on retina devices. And that I was restricted to this “artboard” for my animation. So I decided to do my next animation with pure HTML and CSS. The task was: Creating an animation for Halloween.

So I created all the SVG’s I needed for the animation. And then I just started coding my animation. The ideas was: A bat that looks like a coffee bean should fly into a roasting machine – then the roasting machine should shoot flames and show an evil face. And all that should happen in a Halloween-staged background.

Advantages:

  • The final animation was very sharp (because of the SVG’s)
  • The final animation was more vivid
  • I was more flexible to use the whole space for the animation, and not only a small “artboard”

Disadvantages:

  • It took me forever – as this was the first animation I did from scratch
  • Timeline based animations are really hard with CSS
  • You have no real preview of what you are doing – you change some values and then you see what effect this had
  • Cross Browser testing – of course a lot of things didn’t worked; Firefox screwed up totally

Conclusion: To be honest the list of Disadvantages turned out way longer than I expected when I started with the project. So what I can say: It was a good learning, but very time consuming. The worst part for me was the missing timeline – so I couldn’t visually see, which elements appear at what time – which makes it extremely hard to create story based animation. So I would recommend to do some animations from scratch, to learn the basic concepts of CSS animation, but for my daily work this is not the best tool.

Cropster Halloween animation created from scratch with HTML and CSS

Finally I found my favorite: Google Web Designer

So after my time-consuming approach of coding everything by myself I discovered Google Web Designer. Actually it is mainly designed for making Ads, but I actually found it perfect for regular web animations. I discovered it as I needed to do a third animation: one for Christmas.

Advantages:

  • Timeline based UI
  • works with SVG’s
  • outputs HTML and CSS (animation)
  • you can switch between a visual view (timeline-based) and a code view (HTML and CSS)
  • you can even set rules to make your animation responsive

Disadvantages:

  • the CSS class names are not the most human-readable ones (which is only an issue if you want to edit it later)
Conclusion: If you’ve ever build any animation with Adobe Flash oder Adobe After Effects, you will be pretty fast in getting into Google Web Designer. The only downside is, that there aren’t that many tutorials out there for building animation (there are plenty for building ads). But it is still in its Beta version, so we will see what is to come. For me this turned out as my perfect tool – because if something isn’t possible within the visual view, I can just switch to the code and add it there by myself.
Cropster christmas animation created with Google Web Designer

Other tools

You might now think that I’ve forgot to mention Adobe Edge Animate: this was actually the first tool I researched for as I could remember that from my time in University. Adobe Edge was planned to be an replacement for Adobe Flash. Instead of Flash files it was possible to get out HTML/CSS and Javascript files – so basically exactly the thing I was looking for. Unfortunately Adobe decided to stop further development of Adobe Edge 2 years ago, so I decided to not invest time in a tool that Adobe already gave up on.

I am sure there are other tools out there you can use and I have not discovered yet. If you are familiar with a tool I haven’t mentioned in this blog post – feel free to leave it in the comments section below – I am always happy about recommendations.

Happy animating!

Lisa Gringl

http://lisa-gringl.com

<p>I‘m Lisa, a Visual Designer, with a passion for responsive Webdesign, UX and Typography living in Innsbruck. I love creating something visual, I like coding and I love the board game „settlers of catan“</p>

Comments ( 4 )

  1. ReplyNick
    so, what you think about adobe animate? It have export to html5 (canvas) and good old flash-project stucture, that google try to reinvent in Google Web Designer
    • ReplyAuthorLisa Gringl
      Hey Nick, Thanks for your comment. I think Adobe Animate has its place in web animations too - I think the main problem for my smaller animation projects with Adobe Animate is that I do not wanted to include Javascript and Adobe Animate always exports with Javascript (as far as I experienced there is no option to only work with CSS animations and HTML). So it's probably a good alternative when you do complex animations or games. Google Web Designer is just simpler (and has of course a lot less features).
  2. ReplyPaula Fleck
    About Adobe After Effects: there's a plugin for AE called bodymovin. You can create an animation with Photoshop layers or Illustrator shapes and then export it directly to SVG and JS. Take a look, it is wonderful! Example: http://codepen.io/airnan/pen/PqjwYM Plugin: https://github.com/bodymovin/bodymovin
    • ReplyAuthorLisa Gringl
      Hey Paula, that looks awesome - I will definitely have a look at that one. Especially for complex animations this looks great! Thanks for the tip!