03-01-2018, Web Development
by Mateusz Raczynski

How to Use Web Animations Effectively

Mateusz Raczynski
Contributing Editor
More by this author

Animations always drive more attention than still images.

Our brains have been “trained” since childhood to respond to them positively and instantly. And when you give your audience positive emotions while not stealing too much time from them, they love it. This positive reaction is passed on your brand or products and the result is that you win new customers.

Web animations can also do that. Their main purpose is pretty much the same – to create a feeling. To tap into emotions.

To do that, you need the right timing. Is your animation smooth? Fast? If fast, how fast? What reaction do you want to create when users interact with the animation?

Don’t have much time for reading? Just contact us and we’ll take care of the rest.

There’s a lot more to it, but every web page is different and has a different goal. Web animations allow you to reach the goal of enhancing the emotions of their audience and highlighting the core values of your product, brand, or company.

But how to use them effectively? How to go about creating a site that is engaging and fun to interact with but doesn’t interrupt the user experience?

Let’s find out.

Types of Web Animations

See the Pen SVG Animation by Sean McCaffery (@seanmccaffery) on CodePen.

There are quite a few technologies you can use to animate the content on a page.

We all know the simplest one – GIF. GIF allows you to present video-like animations, but their weight is just huge. They are not the most beautiful way to animate, nor the sharpest. That’s why it’s best to use GIFs to communicate via messaging apps, where they’ll work to enhance texts.

Then there’s Flash. It doesn’t weigh too much and is fast and interactive, but… yeah, it’s so 2000. Mobile platforms no longer support it, so with today’s focus on mobile, you should probably just forget about it.

There’s also the APGN technique which supports the alpha channel, but it’s not supported by all browsers, so using it is quite risky. The same is true for SMIL animations. SMIL is able to animate properties that CSS can’t, but again, it won’t work in every browser.

Read also: Web Development Trends in 2018

The most popular technology in today’s world is therefore HTML/CSS. It’s simple, works well on mobile and can manipulate scalable vector graphics – SVGs. But it doesn’t support animating all of the properties of SVGs – that’s why it’s often backed up by JavaScript (JS).

This last combination – using JavaScript on CSS elements – is the one that will work best in most cases.

Why Use SVGs?

See the Pen SVG Heart Animation with CSS by Nikolay Talanov (@suez) on CodePen.

Although CSS and JS allow you to animate image properties, you need the image first. it’s important to focus on your site’s performance following on the recent updates from Google announcing that rank in the search results will be affected by site performance.

The SVG format will take care of this. What’s most important is that it’s really light for browsers while having an infinite scalability. It will look slick and clean on any display – mobile or desktop – and will load fast. It can be handled with fewer HTTP requests, but complex vectors are more challenging for the CPU to draw. However, you shouldn’t be worried about that too much – modern computers are fast enough to handle them smoothly.

How to Improve the User Experience

See the Pen Animated SVG icons by Luigi De Rosa (@luruke) on CodePen.

Okay, so we know what technology should we use for web animations, but it is more fundamental to ask what the animation should look like?

Focus on the user experience by looking at it from the user’s perspective. If you’re not creating a website from scratch, then you probably have the data to back your decision to animate the webpage or not. Which metrics will tell you the most?

You can look up the hardware and browsers used by your audience. Check the current site load times as using animations will definitely affect them. There’s no need to make a heavy website even heavier. If you decide to go for the animation, compare the time spent on the page before and after implementation. You’re likely to see an increase in engagement as shown in time spent on the page and scroll depth.

But that’s mostly for Google. It’s most important to focus on enhancing the user experience. The worst thing you can do is to add animations that interrupt it. Designing the web animation is similar to designing a static web page – you need to justify your decisions and avoid writing too much code.

So, wrapping this up – you don’t animate a page just to make it fancier. You do so to enhance the user experience and make it more entertaining and engaging.

How To Keep The Site Performance High

See the Pen SVG Animated Image with linearGradient by Patrick Young (@ISOgenesis) on CodePen.

You won’t achieve top performance just by using SVGs. There are good and bad ones – just as with any other web asset that needs to be optimized for maximum performance, you need to optimize the SVGs you use.

Firstly, if the designer is not the same person as the coder, they should talk the design through together to focus on performance. Paper drawings traced by the illustrator create a lot of useless junk. It’s best to use simple shapes and draw directly on the computer. The fewer points the path is required to draw, the better.

If drawn images are part of your style, of course you can use them, but by simplifying paths it might turn out that the objects look the same with a reduced file size. Reducing the size of the canvas will also help.

There are more ways to do that and the simplest is using an optimization tool. You can check an example optimizer here.

What Does a Proper Web Animation Look Like?

One of the animated, gamification projects we’ve done for our clients – HelpSquad and LiveHelpNow.

You might already have an idea about how to do web animations right. Want to see a real example? Here it is.

It’s a page we did for Help Squad, a company using support and sales agents for live chats. This particular project is called a “Triathlon” and was used to challenge the skills of live chat agents. Check it out for yourself.

All the characters seen in this “Triathlon” are CSS Image Sprites. This technology allows you to upload one image with all its assets. Why would you want something like this? The CSS allows you to show only a part of the image – the browser requests only one image from the server in order to show its parts – in this case, the characters – by executing the code on its own. This technology allows you shorten loading times.

The background and elements of the interface are animated with HTML elements. We’ve used GSAP to do this and manipulated the background positioning to achieve the animation effect. Why GSAP? It has the broadest browser support and has transformation standardization so that the browser will draw the starting points the same, allowing you to build timelines for the animations, animation embedding, paths, and much more.

We created a game that is fun to play and responsive to the player’s score (it speeds up and slows down and shows more or fewer elements depending on the player’s actions and so on) while keeping the performance at a high level.

So, Is There A Perfect Web Animation?

To wrap this up, the perfect web animation is as fast as possible while improving but not interrupting the user experience. You can achieve extraordinary results, but there’s a lot that can go wrong.

If you’ll focus on performance and user experience, your website will be just fine. Or even better.

Similar posts

How to Invest Less in a Product

06-13-2018, Web Development

How to Invest Less in a Product