Web Animation: What’s achievable in 2022

CSS Animation

I’m sure you’ve probably heard of HTML, you can see the HTML of our website if you press Ctrl + U (Cmd + U on a Mac) while on this page, it’s the building blocks of every website… the skeleton if you will. Well CSS is the skin, hair and clothes of the website. Cascading Style Sheets control how the website looks and even the overall positioning of where items sit.

It can also be used to animate elements on your website and is in fact the most common type of animation used on the internet. If you hover over a button and it changes colour, this will be the result of the :hover class in CSS that applies different styles to that element when it’s hovered over.

In recent years it can go even further, with complex animations including multi-step and delayed animations that are actioned when the user clicks. It utilises a property called keyframes and allows the animation of menus, like the one seen on one of our recent projects urchinspirits.com.

CSS hover animations can also produce effects like the one you can see below. None of the elements in this animation are pre-made images, the structure is built using HTML and the styling and animation is built using CSS. It’d certainly make us click on it.

Loading Icons

When you go to a new website or even change pages on a website you’re already on, sometimes the information won’t load immediately, and this can be masked a little by using loading animations.

Often the animation is a pre-set amount of time rather than the actual loading status of the page, and companies will often use them to keep the user engaged. But a well thought through and implemented loading animation will keep a user engaged, even though most web loading times in 2022 are under 1.5 seconds. Some companies will artificially increase loading time between pages to actually post internal adverts for their services.

The loading icon shown here is animated to show a ripple effect across the bars which also change colour from transparent with a black background to red and back again.

Parallax Scrolling

The parallax effect in web design is where the background image moves at a different speed to the foreground. You can see an example of the effect if you’re looking through a window and seeing how your perception of the view changes as you move around in front of the window.

The effect can be used in different ways too, on the Supreme Freight website it’s used as a static image in the testimonials section as the background appears to stay static. Or it can be applied to individual images within a section, like the spirit bottles on the Urchin Spirits product pages.

It’s employed in a really dramatic way on some BBC articles, the piece Now You See Her is a mini-biography about Mary Phillip, England’s first black international football captain.

SVG Animations

This is the newest form of animation, an SVG is actually code rather than an image. It’s a series of mathematical points that your web browser translates into an image and is frequently used in web development for scalable items like logos and icons. The code and image will be approximately physical size on your website, but the SVG can be made as big as needed without any loss of quality.

Sites like Duolingo have taken this even further by creating a series of characters that animate when you click the submit button for each exercise. These animations are incredibly flexible as they can be triggered by events, but also utilised equally effectively on desktops, laptops, tablet and mobile without any loss of quality or performance.

Conclusion

Animation is a fantastic way to add depth and dynamism to your website, and now with modern techniques it’s more achievable than ever. It draws the eye, adds a level of sophistication and polish, and interactivity in animation gives yet another layer of interest. Feel free to get in touch with us if you would like to discuss how your website could benefit from modern animation techniques.