Graphic & Web design blog

Tips and Tricks for the Best Online Animation

It doesn’t seem so long ago that all it took to have a stand out web presence was some great content with the right keywords and a good logo. How times have changed. These days, if you can’t catch your audience in the first couple of seconds with some eye catching animation, you have lost them forever.

Of course, the principle of animation is as old as the hills, and despite constantly changing technology, some practices have stood the test of time and are as relevant today as they were years ago. Here are our top four tips and tricks to get the best out of online animation:

1. Turn the sound down

The first tip is one of those that has stood the test of time. If you want to check how effective your animation really looks, click the mute button and just watch it. There is nowhere to hide, and if something is not right, it will be far easier to spot it without the distraction of the soundtrack. In fact, it will stick out like a sore thumb.

2. Try SVG Animation

If the first tip dates back 50 years or more, the second is cutting edge. In case you have not heard of it before, SVG stands for scalable vector graphics, and SVG animation is set to become the next big thing in online animation. SVGs are essentially similar to GIFs, but have the advantage of being far less heavy when it comes to file size. This means they load faster and run smoother. SVGator is a quick and easy way to animate SVG. It offers a user-friendly interface and automatically generated code.

3. Small is beautiful

Don’t try to create War and Peace. The best way to get better faster is to work on short animations and get them out the door. You will find your skill base grows, as well as your confidence. As Woody Allen almost said, if it takes longer than ten seconds, you’re doing it wrong.

4. There’s more to expression than expression

One of the biggest challenges animators face is getting facial expressions right. When you really look properly, however, you will see that it is less about the poses and more about the motion. For example, eyes darting in confusion or lips trembling in sadness. Focus on the movement as much as the pose, and the desired effect will come far more naturally.

Sign up below to get the latest from Designer Daily, plus exclusive freebies, directly to your inbox every day!

About this site

Designer Daily is a place for designers to find inspiration, resources, and thoughts that will be useful to their daily work. It is maintained by Mirko Humbert, a Swiss graphic and web designer. More info.