Website Animation

“Website animation” refers to movement of content onscreen, but is distinguished from video / movie content.

There are many useful applications for animation in your website or web application.  Some of the most common animations you will see in modern websites and web applications include:

ACTIVITY INDICATORS

Waiting for a screen to refresh after submitting information is bad enough, but when there is no indicator that something is happening, people get nervous!  The spinning icon that appears in the middle of the screen gives you just enough visual indicator that something is happening, to remove the temptation to click again, just to make sure something is happening.  🙂

Whilst tempting to fill the page with them, that’s the last animation we will actually embed in this post!

Interactive forms

When you click in a form field, and a set of instructions slides into view to help you fill out that field.  Showing (and then rapidly hiding) each keystroke as you enter your password uses animation to help you get your password right, without letting others easily see it.

There are many ways that animation of form elements is used to guide a person to complete a form, including on-the-fly error handling.

Photo SlideShows

Communicating key messages to your audience in the one area of the screen is often achieved via an image & message “slide show” at the top of a website home page.  The home page slider uses movement and visuals in a defined area of the screen to quickly convey information, and attract attention, without the visitor needing to scroll.

Animated Graphics

For example, a logo that draws the attention of the viewer as it “forms” in front of your eyes will help your audience remember your name and branding.  We have assisted clients recently with animated logos as intros / outros for webinar presentations.

Animated graphics are also used to delight the viewer, or make a big impact, for example the animation at the top of the Enudge website.

Animation is often used to help communicate concepts, and is widely found in online learning to emulate a physical educator, and/or visually teach the viewer.  The quiz / card game “Know Lupus” is a great example of the use of animation to educate.

Simulation can be greatly enhanced through the use of animation.  We used animation within a desktop application which helps a user of a centrifuge simulate the movement of liquid through the centrifuge.

The animation at the top of the Contactpoint website is another example of the use of animated graphics, which tells a story to help a visitor understand the types of technologies we work on.

The transitioning text at the top of the Kool Kidz Childcare website is another example of animation to communicate a key message, in a fun and eye-catching way.

What is JavaScript?

JavaScript is a scripting language which used to create and control dynamic website content on both client-side (that is, the content that the person using the web browser sees, and that is located on the visitor’s computer) and server-side (that is, the content that can be programmatically generated in reference to databases and other assets).  Dynamic content allows us to create highly interactive web pages and web applications.

JavaScript is the most common technology for achieving onscreen animation within websites and web applications.

There are numerous common JavaScript frameworks which are used by many web programmers, including:

• jQuery
• Vuejs
• React
• Nodejs

Each of these frameworks have JavaScript as their base, over top of which they provide numerous packages.  These often comprise:

• A more succinct or more understandable programming syntax. It’s all still Javascript, but each of the common libraries mentioned above look very different from each other, to the programmer.
• A collection of tools that achieve specific user interface tasks. That could be anything from common user interface components (such as forms, sliders, carousels etc), security components, data manipulation components, and more.

Some technology solutions require the use of more than one JavaScript framework, or additional JavaScript libraries that have a very specific purpose.  For example, when building a web application which has clear separation between backend processing and frontend design, we will likely use Vuejs for the frontend (client-side) aspects, and Nodejs for backend (server-side) processing.

For very complicated animation, developers may also use additional JavaScript libraries, which make animation easier and more convenient to achieve. The top 5 JavaScript animation libraries to help achieve much more complex animations are:

• Anime.js
• GSAP
• Velocity.js
• Threejs
• MO.js

Reasons to use JavaScript to Animate

JavaScript is used for the following general purposes:

• Adding interactivity to the user interface e.g. animation of key content to draw attention to it, guiding a user through submitting form.
• Creating web, mobile and desktop applications. Because Javascript can be used for both client-side and server-side functionality, it makes it a great candidate to fast performing apps.  Developers benefit from using similar technology both client-side and server-side, as there are fewer languages required, and interactions between similar technologies has advantages.
• Building web servers and server applications.
• Game development. Although, very complex, multi-player games are more likely to be written in lower-level languages.

There are many reasons why JavaScript is the best choice to animate a website or web application, including:

1. JavaScript is native to the web browser, meaning that it runs very fast.
2. Whilst it is also possible to create animation within a website using CSS (cascading stylesheets), you can usually achieve the same thing (or better) in JavaScript more easily and with better browser support.
3. It is a very popular language, which means that there are plenty of resources available when a developer is attempting to achieve a particular user interface.
4. It has a very large online community, which provides strong support for learning and developing.

Although, it isn’t the only choice for creating animations, and for specific tasks might not be the right choice.  For example, the animated logo mentioned earlier might be better achieved using a .svg file, which is a special vector format image, that can be programmed to animate and retains perfectly crisp edges at any size.

When selecting a particular JavaScript framework, we consider the main features of each, and ensure that we choose a framework that will provide the right set of tools for the required solution.

When should a Website Avoid Animation?

We recommend that you should not include animation within your website or web application for the following reasons:

1. Just because you can i.e. don’t animate everything and anything just because it is possible.  Animation for the sake of it can end up being annoying or distracting.
2. To shift the location of web page content after page load.  Shifting page content can cause Google to penalise your website’s rank in its search engine results when Google determines that it is negatively impacting on the user experience.
3. If it is unnecessarily slowing down the performance of your website / web application.

If you would like additional animation added to your website or web application, the Contactpoint development team is ready to help!

by

This entry was posted on Tuesday, April 26th, 2022 at 12:49 am and is filed under User Interface Design, Custom Technology, Digital Design. You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.