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:
- Do I want to code the whole animation by myself?
- If yes, do I want to do with HTML and CSS?
- 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?
- 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?
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.
- 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
- 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.
- 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”
- 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
- 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
- the CSS class names are not the most human-readable ones (which is only an issue if you want to edit it later)
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.