Tips for using animations on your website

Many modern websites use animations to make the web page more visually appealing and eye-catching. Animations can be used to draw the reader’s’ attention to something or to highlight a certain feature of the page. They can even be used to add visual flair and movement, but be careful not to overuse animations.

Animations on a website need to be used in moderation in order to be effective. If everything on a page moves, it can be overwhelming and distracting for the audience. It can destroy the ease of navigation on the page. But one or two animations will create a dynamic user experience that your visitors will enjoy.

Animations have to be used to enhance your website goals. They need to be planned and should fit into your website design scheme to really help the user in their navigation of your site. Here are some tips for using animations on your website.

Study the basics of animations

Animations can come in varying degrees; from a simple and slight motion of a button to a fully expressive moving logo at the top of the page. They can be interactive with your user’s mouse, only moving when pointed at, or they can be a constant animation.

Animations can be used for small elements such as an arrow or they can take the form of a video background that fills the page. Studying the full spectrum of animations will help you to decide which ones to use on your website and why you want to use them.

Animations can be categorised into three fields:

  1. Micro-interactions – These are small and quick animations that activate with the click of the mouse or by hovering over a button.
  2. Decorative – These animations simply add flair and movement to make your site look more visually appealing and eye-catching.
  3. Transitions and page animations – These are used for navigational purposes when clicking from one page to another.

Use animations in moderation

Fight the urge to plunge your website into chaos with moving buttons and animated backgrounds. Not only will too many animations confuse your visitors, but it will also slow your website down.

Animations can sometimes be large files, so using too many will make your website slow which is bad for SEO and your user bounce rate. People don’t have patience when it comes to websites that take too long to load. Keeping the animations to a minimum will ensure a fast and interesting browsing experience for your users.

Animations should only perform one task

Only use animations when you can justify their purpose, such as drawing the user’s attention to something important. To help you keep it simple, animations should only perform one task when used.

The task could be guiding the visitor’s eye and showing them where to click, or it could be used the break the website’s static nature by adding some movement when you scroll (such as the parallax effect).

You can support your story by revealing items as the user scrolls down a page or create an animated video that explains the importance of your product or service. If you can justify the use of animation, remember to keep it simple and only use the animation to perform one task.

What should you animate?

There are certain elements on a website that are perfectly suited to be animated. If you decide to add some movement to your site, first target buttons that the user should click, such as calls-to-action, menu items or links.

Elements that show your user where to go can also be animated, such as arrows and even the background as they scroll. You can also animate loading bars to make your website more interactive while users wait for it to load.

You should never animate paragraphs of text as this will make reading harder. Also avoid animating blank fields where users enter their own content, such as contact forms or comment boxes. These examples are just distracting and will hinder the user from performing simple tasks.

Remember that your audience should always come first. If your website is too confusing and overly animated, your audience will simply click off your site and never return. On the other hand, moderate and simple animations will enhance the user experience and can encourage visitors to return to your site.


Sorted Design Agency is a creative company that constantly looks for solutions to other people’s problems. These problems come mostly in the visual format, such as graphic design, logo and illustration, but we’re experts in brand development, website design, and digital SEO campaigns as well.


Based in Pretoria and Cape Town, Sorted has been in the content marketing industry since 2006. We assist your company with its corporate identity by communicating core values through content and articles written for your website, blog and news area. This content is supported by AdWords and social advertising, which facilitates wider reach and audience growth. Turn your website into a business tool.


Sorted also owns two other businesses; InkFish Print Studio – a printing company that handles a range of promotional materials for businesses and other services for individual customers, and Pampiri + Kie – a gifts and stationery store selling online and in-store. Both of these companies operate from Cape Town and Pretoria.


Follow us on Facebook, Instagram and LinkedIn for the best tips on design, marketing and web development. We also share the latest industry news and fresh content to inspire fellow designers, creatives and marketers.



More Posts


This website uses cookies to ensure you get the best experience on our website.