Many e-commerce websites use the same generic site format, with a landing page, product pages, catalog, category pages, and a few other accessory pages, like an about page, FAQ page, blog posts, and contact page. Overall this formula works well to provide all the necessary information to visitors, but it can be repetitive and mundane. One way to add interest and dimension to an e-commerce store is with strategically placed animations. A large variety of animations can be incorporated into a website to engage and entertain visitors while also emphasizing the most critical areas of the site.
E-commerce sites that integrate animations effectively will keep visitors on their site longer and convert more visitors into paying customers. Continue reading to learn the five most common types of animations and how to incorporate animations using web technologies and frameworks.
What is an Animation?
Within the world of web development, animations are page elements that change or move. Animations can be added through a variety of technologies, including CSS, JavaScript, Lottie, SVG, Canvas, and WebGL/WebGPU. Web page animations breathe life into an otherwise static site, helping transform a boring 2D experience into an exciting experience full of motion and dimension. Today, animations are all over web pages on the internet, although many animations go unnoticed because they are subtle and unobtrusive. But even the most subtle animations can improve the user experience.
Types of Animations
There are five primary animation types that help add engagement and interest. This guide covers the five animation types in order of increasing influence and difficulty:
1. Hover/Mouseover
Hover or mouseover animations are a wonderful way add flair to a webpage, while bringing attention to a specific page element. As e-commerce stores increase in complexity, the number of elements on any given page increases. Sometimes it can be difficult for visitors to track where their cursor is within a menu or set of elements. Hover animations also provide a way for websites to provide more information to a user on demand, without wasting valuable space on the page. Most polished and professional e-commerce sites make considerable use of mouseover/hover transitions because it greatly improves user experience.
In the example below, there is a clear presentation and emphasis improvement between the normal product card and the product card when a visitor hovers over it.
Hover animations are very simple to implement through CSS (cascading style sheets). There are dozens of different hover effects that can be added to an e-commerce site to add visual interest, including changes to shadow, radius, color, transparency, scale, and much more. Unfortunately, hover effects don't work as intended on touch devices, which often constitute a large percentage of web traffic.
2. Moving Elements
Moving elements have a powerful ability to draw the eye, making them a great way to highlight essential elements. Users are more engaged with moving elements than static elements, but it's important to strike a balance between static and moving page elements. Too many moving elements can be distracting or overwhelming, but a few strategically placed moving elements can change how a page is received and enjoyed. These kinds of animations can create an overall positive experience when visiting an e-commerce site, so even if a purchase isn't made on the first visit, they are more likely to return.
These elements can move in response to an action or click, move continuously during a visitor's time on the page or occur on page load. Here are two examples of moving elements, the first is a simple implementation of a cart modal and the second is a much more complex hero animation:
3. Skeletons and Loading Indicators
Skeletons and loading indicators are essential elements of any e-commerce website that wants to keep users around. When browsing the internet, users have a very low tolerance for waiting. Lots of data can add additional load time, so it's important to keep a visitor's interest as long as possible. Skeleton screens create an illusion that the page load time is much shorter than it really is. A Skeleton screen distracts users while the page has a chance to load because their eye wanders around the page expecting the web content to fill in instead of just staring at a blank page. Skeleton screens with motion are the most effective because it further decreases the perceived loading time.
Loading indicators are another method of providing status information about what is happening. Any website feature that takes longer to load than the rest of the website should use loading indicators. Loading indicators are usually represented as an infinite spinning circle (rotational motion) or a progress bar (linear motion). But creative loading indicators that use a novel approach can hold a customer's attention for far longer. Visitors will find themselves drawn to the animation and wanting to wait a little longer to see the full resolution.
4. Image Sequence Scroll
One of the coolest animation types to incorporate in an e-commerce store is image sequence animations on scroll. When users land on a page with this feature, the images move and change as they scroll. It's a wholly captivating and visually attractive way to present visual information. It's fun for users to manipulate the images by scrolling up and down. Incorporating image sequences is a much more involved process than other animation types, but the results are engaging and allow an e-commerce store to explain the features of a product in an exciting way.
Image sequences must be designed beforehand, but if appropriate image sizes are used and loaded intelligently, it won't bog down the page loading times too significantly. Apple uses image sequences in brilliant ways to make their product pages exciting, such as here on the Mac Studio page. As the user scrolls, images on the page change:
5. 3D Scene
Tired of the same boring hero sections repeated over and over on e-commerce sites? Images and illustrations are only so captivating. But newer options like 3D scenes help to spice up a hero section instantly. 3D scenes are used to create an interactive and engaging story around a product. These scenes can reveal key information like a product's specifications, the problem a product solves, and why a customer needs that product.
The catch is that 3D scenes are a ton of work. A UX and 3D designer will most likely be needed to design the flow of the 3D world and create the 3D objects. While this is an emerging animation technology, it's expected to grow massively in the next few years as devices become more capable of running 3D scenes. JMES for example has an exceptional 3D story that unfolds as the user scrolls through and interacts with the scene.
Technologies
Different animations require different technologies to implement. Basic animations might use CSS, while advanced 3D animations may need to be built using WebGL/WebGPU. This guide covers the top 6 most commonly used animation technologies in order of increasing difficulty:
1. CSS
Cascading Style Sheets, or CSS, is the backbone of any website's style. While HTML outlines the structure of a webpage, CSS dictates the visuals. Without CSS, an e-Commerce site would look like it came straight out of the early 2000s. CSS is a powerful technology that is easy to get a beginner's grasp on but has a very high skill ceiling. Talented developers can create beautiful and intricate animations using only CSS. For most e-commerce sites, simple hover animations can easily be added using only CSS.
2. SVG
SVGs are scalable vector graphics files that support animation and interactivity. SVGs aren't made up of pixels like standard image files, meaning they can be scaled up or down to any resolution without losing quality. SVGs are an excellent animation technology because they can be styled and animated using CSS. The same animations used for CSS, like keyframes, duration, easing, and delay can also be applied to SVGs.
3. Lottie (JSON files)
Lottie is a JSON-based animation file, first developed in 2015, similar to a GIF. Lottie files are small but can be scaled without worrying about pixelation issues, making them easy to use for various screen sizes. A designer can easily create an animation in an animation program like After Effects and then export it as a Lottie file for the Web. Lottie files are widely used and have surpassed the usage of GIFs.
4. JavaScript
JavaScript takes a beautiful website built from HTML and CSS and makes it interactive! While HTML and CSS produce static pages, JavaScript allows for implementing complex features, including 2D/3D animations and scroll animations. It is a very powerful language, so powerful it is used by 97.6% of all websites. Thankfully, it's easy to learn the basics, and dozens of frameworks and libraries are available to help expedite the development process.
5. Canvas
Canvas is a great technology for creating custom animations, like scroll animations or image sequences. Canvas is an HTML element that creates a blank section for drawing shapes, lines, and other graphics using the Canvas API. It uses JavaScript for animations, so a developer proficient in JavaScript can easily get started creating animations with Canvas.
6. WebGL/WebGPU
WebGPU is the successor of WebGL, which is the successor of OpenGL. They all allow for the creation of complex 3D scenes. As these technologies have developed, they've become increasingly sophisticated and powerful. WebGL animations are created inside a Canvas HTML element. To work with WebGL, a comprehensive understanding of JavaScript is needed. WebGPU is even more powerful and efficient but is still somewhat experimental.
Frameworks
Thankfully wonderfully talented developers have created frameworks and libraries that make implementing animations in an e-commerce site much more accessible. Frameworks are a support structure with ready-made components that dramatically reduce the need for custom coding. Frameworks also help to accelerate development times, providing developers with a quick way to add functionalities like hover animations, loading indicators, 3D scenes, and other essential webpage components.
JavaScript is the most commonly used programming language for adding interactivity on top of HTML and CSS to create a fully-fleshed out e-commerce site, so many of the examples listed below are JavaScript frameworks/libraries:
The Bottom Line
E-commerce is a competitive world, with millions of storefronts competing for business. An e-commerce site should always consider the user's experience to stand out from the crowd. Visitors don't want to browse a boring website without visual interest. That's why adding animations to an e-commerce site is invaluable to increasing conversion rate.
Incorporating a variety of animation types, including hover animations, loading animations, image sequences, and 3D scenes, creates an interactive and appealing website for visitors. These can be built from various technologies, from CSS for basic animations to WebGPU for the most advanced 3D animations available today. But developers don't have to start from scratch, as numerous frameworks and libraries have been developed to increase the accessibility of these technologies and improve development timelines.
If you need help creating an e-commerce storefront that features eye-popping animations contact us at Excyted to discuss your project.