The art and science of web animation

Web animation are more than just those flashy, eye-catching things that “jazz up” your website. They have the opportunity to surprise, delight and enhance your user experience.

Before we dive into how to best use animation on your website, let’s first talk about the different types of web animation –from the simplest, most-expected animations, to the more fancy and complex options.

Types of Web Animations

Simple & Expected

Micro-interactions: Micro-interactions are basic animations that occur when something changes, like when you hover over a button, and it slightly changes color. This provides a visual queue that this item is clickable which is a perfect example of a micro-interaction.

UI Feedback: This is another type of micro-interaction but it’s a step further than just a hover state. It provides instant feedback to the user once they take an action. For instance, when you click a button, and it bounces or changes color—that's the website acknowledging your action and providing feedback.

These are the two most basic and expected animations that are a MUST for websites. These are basic queues and the first step to provide a great user experience.

additive & intentional

These types of animations aren’t necessary and can even be distracting. Use with intention and care.

Parallax Scrolling: When you scroll down a page, the background and the foreground move at different speeds. It gives a sense of depth, almost like looking through a window while driving. This can add visual interest and movement but note: this has been trendy in the past and way-overused. Use intentionally!

Video or GIF: Video clips or short, repeating animations (GIFs). Think of them as looping mini-movies that don't need user interaction to play. They can attract the eye to a specific part of the page, add energy and movement, and provide personality and life. However, also keep in mind accessibility. These just be additive to your content and not the main show as the visually impaired will not be able to visually consume this content in the same way.

Scroll Animations: Animations that appear or change as you scroll down a page. For instance, as you move down, a picture might slide in or a piece of text might fade into view. This can also be called “lazy loading” which ultimately means the site isn’t loading all of your content until it needs to which helps your site perform better (speed wise).

Loading Animations: These are like "please wait" signs. If a page or part of a page is taking time to load, these animations (like spinning circles) keep you informed that something is happening behind the scenes and to hold tight. These are especially useful when you’re loading heavy content that is worth the wait (like multiple videos). Another alternative to this is to have a backup image ready to go in place of a heavy video or gif for your browser to display in an instance of low network speed or connectivity.

Technology is so flippin cool that it can read all of this and still provide the best user experience based on speed and accessibility, isn’t it?!

Complex & Custom

This is where the fun really comes in. There are SO. MANY. ENDLESS. POSSIBILITIES. when it comes to animations. We’ve already covered the basic and expected animations. We’ve also looked at the next layer of not-always-necessary but can be additive and intentional animations. Now let’s look at just a few of the many complex and custom animations.

SVG Animations: An SVG, put most simply, is a type of image format that's made up of instructions for drawing shapes, rather than a grid of pixels like JPGs or PNGs. If you’re a designer, think of these being an editable shape in Illustrator vs a static/flattened image like a jpg. SVG animations are about moving or changing these shapes over time. Imagine a drawn hamburger menu, and with SVG animation, you transform it into a close “X” upon click.

JavaScript Animations: This is like giving your animations superpowers. Using JavaScript (a scripting language), you can make animations react to user actions, create complex movement, or animate things in ways that CSS just can't do on its own. It’s a more in-depth, complex animation application that opens up endless animation possibilities.

Fun fact: There is a right and a wrong way to set up Javascript for optimal usability. In my Squarespace templates, I use Javascript in a way that is still easily manageable and updatable by designers or other business owners. In fact, you don’t have to touch the Javascript at all. I’m always thinking about my end user!

What do animations even matter for branding? And how can you learn to use them in the best way?

Why Animation Matters for Branding

Now, let's get into the nitty-gritty. Your website is your brand's digital face, and animations are like its expressions. They convey personality, mood, energy, and more. Think about the differences between a playful bounce, an elegant fade, or a futuristic hover effect. These aren't just eye candy for funsies (I mean they can be) but more importantly – they're an extension of your brand identity.

Animation Best Practices

Before you go balls-to-the-wall with animations, there are a few ground rules. Less is often more – overdoing it can make your site feel like a circus, distracting, overwhelming. Remember how this is another extension of your brand? I assume you don’t want your users to feel distracted, anxious and overwhelmed.

So, keep it balanced and straightforward. Start with a clear purpose for each animation – is it guiding users, highlighting content, or simply adding that 'wow' factor? And always, always test your animations to make sure they're user-friendly. Remember, we’re here to delight your users in a way that is authentic to your brand.

Note: not all animations are equal across all devices and browsers. Hover states don’t exist on mobile! So be thoughtful when thinking through them.

The last thing I want reiterate (for the 15th time, I know) is always go back to user-centered design. Animation isn't just about making your site look fancy-pants. It's about making it more intuitive and user-friendly. Think about your audience – what do they need? How can animations make their lives easier? This is where the real magic happens.

So, there you have it homies – the lowdown on web animation. It's not just about making things move; it's about creating an experience. When used right, animations can turn your website into a dynamic, user-friendly masterpiece. It takes practice, but it truly is an art and a science. Questions? Hit me up!

Are you ready to create your amazing, dynamic and on brand website? Let’s get started!

You may also like…