Some Awesome Tips to Add Animation to Your Website

It was one of those days that was just refusing to progress and I was just a blink away from dozing off when I accidentally spotted an open webpage on the computer next to me. And I was mesmerised. It was a Cartoon Network’s page and it was not just the images that had me enchanted, but the website itself- it was alive. It was fun, cute and attractive. This was first time the potential of an animated website truly hit me.

Animated websites appeal to the audience in a way that regular stationary websites simply can’t. They make content easily understandable, easily digestible and are way more  engaging. It has been proven that your audience is more likely to stay on a website that is animated.

MAKING WEBSITES LEANER & LIVELIER

Cartoon Network may not be the first to use animation on its website, I am pretty sure it is not the last. Folks have always been looking for ways to get some animation on their websites- remember those Flash websites that took forever to load?

Others used gifs, but gifs too are heavy and drag the loading time.

Then came SVGs- Scalable Vector Graphics. SVGs were not heavy and quick loading – suddenly the world of animatable websites opened up to the world!

TO SVG OR NOT TO SVG?

Wondering  why you should use SVGs- apart for the fact that it makes your website absolutely gorgeous, unquestionably interesting and impressively easy to follow? Well, here’s why-

Scale it up or low and SVG doesn’t get pixelated. Regardless of the size, it retains the quality. Today’s websites and landing pages have to be responsive and this can often be challenging. SVG can give you consistent experience across platforms- desktop, laptop, tab or mobile- because it is resolution-independent. So your audience gets an HD experience everywhere.

You can enhance your audience’s experience by adding special interactive elements to the SVG or give nice little animation effect to the icons on your site.

SVGs are also easily editable and have smaller file size which make them a commonsense choice for any webpage.

Here are some examples of websites that have made ridiculously excellent use of SVGs:

  • Cartoon Network

  • Ripple

  • RobinHood

BRINGING THE WONDER OF SVGs TO YOUR WEBSITES:

There are various methods to use SVG on your sites. We use an After Effects plugin called as Bodymovin to bring bewitching colours and complex movements to life on websites. It helps to use our After Effects animations on websites. With this plugin you can animate icons, UIs, websites, icons and more. Of course, you also get all the benefits of SVGs. You can customize the animations to suit your taste.

Checkout how we’ve made use of Bodymovin :

SO…

Animating your websites makes your brand stand out. You reduce bounce-rate and endear yourself to your clients. And now there are ways to easily incorporate animations into your websites. Time to make your page look livelier and overall happier!

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore