How to use Lottie animations for eCommerce websites

In order to engage users more and enhance conversions, especially on eCommerce websites, animations can provide you with the interactivity and simplicity you need. Whether you’re a designer or an eCommerce website owner, animated icons can prove really helpful assets in increasing visitors’ interest and engaging with your website for longer. Lottie is one of the few animation file formats that come with great convenience and simplicity.

In this blog post, we’ll show you how to get the most out of Lottie animations for your website. But that’s not all! A full series of 32 animated icons for immediate use on your eCommerce websites or other projects is free for download!

lottie-icons-zitec

The benefits of Lottie file format

Lottie is an open-source animation file format that’s small in size, high quality, and interactive. It is compatible with Android, iOS, and Windows devices, and easily integrates with the tools you already use. Lottie allows you to create and customize animated icons in a very smooth JSON-based format, which enables easy export and import.

These animations can be scaled to perfection without compromising the quality. Lottie files can be customized and can be even up to 600% smaller than GIFs. Moreover, they have a quick download speed and keep your site or app operations as smooth as possible thanks to minimum interference. By leveraging Lottie animations, you can provide an improved experience to customers and bring more engagement and interest to otherwise static graphic elements.

A free series of Lotties for your eCommerce website

In our UX/UI-related activities and projects, we constantly look for more optimal resources to make our customers’ websites look modern and improve conversion. Recently, we’ve created a series of 32 Lottie animated graphics (also in SVG and PNG format) that can be easily incorporated into your eCommerce website. They’re diverse, so you can be sure to find the animated icon for your specific purpose. Here are some examples that you can choose from:

Icons to be used on hover (hover to see the animation):

Icons to be used on click (click again to rewind):

Icons to be used on load/event (click to replay):

How to edit and use Lotties

You can use the animated icons from the “animation” folder in Lottie JSON format by adding the bodymovin library to the HTML page. Afterward, with LottieFiles Editor, you can upload the JSON file in the editor and change the colors or other attributes of the Lottie files as you see fit. Apart from the number of frames, all features can be edited.

When implementing Lottie animations, a good place to start is the Lottie documentation. The Lottie libraries for various platforms are available on GitHub:

Afterward, you can include the Lottie player by installing the plugin:

# with npm
npm install lottie-web

# with bower
bower install bodymovin

Or, including the script from bodymovin, you can use the following JS script to activate the icon on hover:

//include iconDemo.json
let iconContainer = document.querySelector('YourIconContainerName');
let directionVar= 1;

let animationDemo = lottie.loadAnimation({
    container: IconContainer,
    renderer: 'svg',
    loop: false,
    autoplay: false,
    path: "/YiurIconsPath/iconDemo.json",

});
animationDemo.addEventListener('mouseover', (e) => {
    animationDemo.setDirection(directionVar);
    animationDemo.play();
});

And, of course, there are other resources online that can help you with everything you need to know about implementing Lottie animations. If you want to further improve the user experience on your eCommerce website, you might want to check this blog post on best UX practices for eCommerce websites.