The Marriage of Animation and Web Design: Adding Life to Your Website

Scroll ↓

Tuesday, 09 January 2024

7 min

by Dominik Nowakowski

In the modern world, where competition is the name of the game, we all battle for user attention. Websites are not only websites anymore, they are something more. We want to evoke emotions in visitors and keep them for a while longer with all sorts of ways and methodologies.
What's the secret ingredient that turns a normal selling website into a memorable experience?

I think that being today only a Designer / Product Designer etc. is not enough. You need to think broadly, with motion and emotion too.
You have to get married with animation. Really.
Understanding the nuances of this marriage is paramount.

Let's go on a small journey into the motion realm where you might understand why marriage of animation and web design is best approach you can take for your product.

Pros & Cons

Every animation choice we make, from a small wiggle of a button on a hover state, to a full 3D animation above the fold combined with a scrolling out effect - directly affects our visitors.

Let's quickly look at all the reasons why animation can be great for a website and its visitors and a few reasons why we should be more careful about that.

Pros:

It just engages users a lot more than static content which can help drive more conversions on your site and produce more leads.
You can easily catch the user's attention to what is important at a specific moment, instead of leaving the user clueless.
It's just telling the story in a small space. :)
Improve your brand competitiveness.
It makes your users want to stay on your website. Let's say you design microinteraction on your hero so that the user can interact with it with a mouse or keyboard. If that is playful, your user will be happy, you will get a positive emotional reaction and the user will be eager to browse the site further out of sheer curiosity

Cons:

Too much can become a frustration
It can significantly slow down your website. That's why you need to choose your tools wisely.
Web animation doesn't always translate well to mobile. That's why you need proper UX thinking while you design your animation.
Can present accessibility issues for disabled or elderly visitors. Not everyone is privileged with the same senses as we are.

Types of animation

Due to the existing tools, you can animate basically everything on your website. But let's try to break down these animations into a few main categories.

Transitions - Smooth transitions between different states or pages that will create a seamless and pleasing user experience. Whenever I see a transition animation that doesn't reload the page that I'm currently on, it makes the website feel so smooth that I really want to stay longer and browse more.

Hover Effects - This one is triggered when a user hovers over an element eg. button, or icon and that gives us small information that something can happen after clicking, or just to bring our attention to that place.

Scroll Animations - All kinds of different animations that can appear on scrolling like revealing elements, loading additional things, sticky scrolling, and horizontal scrolling to get out of accepted rules and expectations to achieve a wow effect.

Loading & Preloading Animations - That one is pretty cool but on the other hand, it lowers the speed value of our site on various tests. Pretty handy when you have some quite big assets to load up and you don't want the user to see basically empty/blank space.

Parallax Scrolling - Background and foreground elements move at different speeds during the scroll creating an easy 3D effect.

SVG Animations - Scalable Vector Graphics can be animated for dynamic and interactive graphics. A great combination with that is using the Lottie library. Then you're only limited by your imagination.. and Lottie-supported features.

Microinteractions - Small, purposeful design element within a user interface, providing immediate feedback for a specific user action. Enhances usability and contributes to the overall user experience.

CSS Animations and Transforms - Simple effects that you can add to your assets like fading, scaling, rotating, etc.

3D Animations - Here you have so many options to to do that. You can think of it in terms of WebGL animations with talented developers like our (Shoutout James!), you can also use Spline combined with Webflow to just basically create fully functional smooth 3D animation with 0 code knowledge needed! Besides that, you have a lot of JS frameworks and CSS and even you can use Blender to export proper models for WebGL!

Cursor Animations - Small details that might be cool but very often can cause UX problems with visibility and other stuff. Your cursor changes states based on content, highlighting elements, changing shape, etc.

Typography Animations - Animating your text on a reveal or interaction for a more dynamic and engaging presentation. Just simply compare a static website and a website with simple text reveal animation. Such a big difference!

Responsive Animations - Adjusting your animation based on the size of your screen device. A great example is studio times.two with their landing page that adjusts inflated signs to the size of the screen! Very cool guys!

GSAP - JavaScript library for creating high-performance animations in web development. It stands out for its ease of use, flexibility, and super performance compared to other animation libraries. Also really easy to use even if you're not a developer! (Webflow masters welcome!)

That's quite a long list huh? I bet that every other motion designer can create their own list with different types of animations. Every one of us thinks differently about it, and that's the beauty of it!

Don't think of that list as something that cannot change, exactly the same applies to your website. Try to play with it, and find the best working solution for you, but please, don't overuse animations. Why?

Consider User Experience

When you're planning to incorporate animations into your website, you also need to incorporate proper thinking and considerations. UX was, is, and will be a crucial element on your site and every product you design.

Purpose - Think of purpose. Why you're adding that animation. What are the pros and cons? Is it purely emotional, providing feedback, or guiding the user through a process? Every animation should have a clear and meaningful role. Yes, of course, you can add animation because you think it's cool. Just do it wisely.

Performance - As same wisely think of your site performance. Large demanding animations can significantly lower page performance, and loading indexes which will also result in your SEO and affect the overall user experience.

Use lazy loadings, and optimize your file sizes. (Please, think of user internet data usage that your website is swallowing when you're not optimizing.)

Distraction - Your content is your power, so don't distract users from it! Avoid overwhelming users with excessive or flashy animations that may divert attention from the actual content you spend time and money writing and preparing.

Browsers - Test your animation on different web browsers. Really. A lot of Mac users are using Safari, it's great but we all know that Safari is kinda limited. Not everything works there perfectly. Don't forget about browsers like Arc, Opera, Firefox, and Brave. Testing is key to everything!

Asking for tools? You're welcome

After Effects - Most popular world-wide known tool for making all kinds of animation. From simple ones to the most complex you ever seen. It also have plugins of Lottie and Bodymovin so you can easily animate something you want and quickly export it for development. This tool is really complex but simple at the same time. Just use easiest way to animate something, change bezier curves and tadam! You got it!

Lottie - Lottie is a library developed by Airbnb that renders After Effects animations in real time. It uses a JSON file format for animations, making it easy to integrate complex animations into web projects with minimal effort.

Bodymovin - Bodymovin is an extension for Adobe After Effects that allows you to export animations as JSON files, compatible with the Lottie library. It's a convenient tool for designers familiar with After Effects who want to export their animations for the web.

Spline - Spline is a user-friendly web-based tool for creating 3D animations and interactive web content. It allows designers and developers to design animations using a visual interface and export them for use on websites. Spline simplifies the process of creating complex 3D animations without the need for extensive coding.

Webflow - Webflow is a comprehensive web design and development platform that includes a visual interface for building websites, along with powerful animation capabilities. It allows you to design and animate elements directly within its interface, providing a code-free experience for creating sophisticated interactions.

GSAP - JavaScript libraries, such as GSAP, provide a more powerful and flexible approach to animations. GSAP, in particular, is known for its ease of use and superior performance. It supports a wide range of animations, timelines, and sequencing, making it suitable for both simple and complex animations.

Logos of tools. Just to know them better.

Conclusion

If you're still thinking about Marriage of Animation and Web Design, just don't. We're developing so quickly that we need to adapt.We are overrun by the social media dopamine hit, devices, etc. that are present to us.
Unfortunately, being in the market, we either have to strongly oppose it and run the company with such a motto, or adapt to the world and grow with it.

That's why I think that animations on the website nowadays are an absolute must have plus I guarantee you that you will get a positive response every time. WOW reaction. The reaction we desire in our industry.