Spruce up your Elementor website with Lottie Animations

One of the best examples of this is Twitter and its “like” button with the heart. The tiny colorful bubbles that spread around it before settling into the final “liked” state creates quite the reaction in our minds. It’s just satisfying to click on.
Share on facebook
Share on linkedin
Share on pinterest
Share on reddit

In the digital era, people are more concerned about how apps and sites make them feel. Thus, developers are constantly seeking tools that could help them provide a better experience to the user and this is where animations can play an important role. We were used to getting animations in the GIF file format, which for web design and development, wasn’t very useful in terms of performance. Enter Lottie, a small-sized JSON-based file format that enables designers to add all kinds of animations that engage users..

Lottie files are very scalable and can work on any device. So, no matter what kind of website you’re building, this format will help you get the job done. And the best part is that using them is way easier than what you’d think. I’ll talk about a few websites where you can get Lottie animations but the mecca of them all is LottieFiles, in which you can preview your animation in a couple of steps before using it.

Going back a bit about what I mentioned before, a Lottie file is 600% smaller compared to a GIF file, according to LottieFiles. This means that by using Lottie animations you will not only be enhancing your websites’ interactivity but its loading speed.

 

lottie animations

 

Animations: Game-changer

Adding animations to your site can be not only fun, but also pretty engaging, so much so that it can be the difference between a visitor and a customer. If you really think about it, an animation can help provide more context and meaning to the story you’re telling. And in a sea of static websites, yours can definitely stand out with simple animations.

One of the best examples of this is Twitter and its “like” button with the heart. The tiny colorful bubbles that spread around it before settling into the final “liked” state creates quite the reaction in our minds. It’s just satisfying to click on. And when we use animations like this in our sites,  visitors will both like (see what I did there?) and understand what’s going on in the site.

Now, does this mean you HAVE to use Lottie? No, of course not. You have the alternative to design animations from scratch. But that can be time-consuming, especially for the complex types of animations that Lottie is good at.

 

Recommended reading: Kinsta vs Siteground: 3 Limitations that make Kinsta the better hosting option

 

Lottie and Elementor: a match made in heaven

Elementor developers can also take advantage of Lottie animations. And with WordPress’s popularity increasing daily, these animations are a must-have tool to remain competitive.

From Elementor’s version 2.10, users have been able to implement animations on their sites thanks to the creation of the Lottie widget, which gives you the choice of adding it either from an external URL or via your site’s own media library. So really, all you need to do is let your imagination flow and Elementor takes care of the rest.

To add your animations when using Elementor, you first have to find and choose an animation. Second, download the Lottie JSON file. Third, go back to the Elementor editor and drag in the Lottie Widget. Then, you need to upload the Lottie JSON file by clicking on the media library icon. Finally, you should start seeing the animation on your site.

With the Lottie widget, you should know that you can play around with settings such as triggers, hover out, loops, and many others. As a result, there’s no limit to the ways your sites move.

Here is an animation using the Lottie widget:

If you’re considering adding Lottie animations, but you don’t know where to get them, here are four places that will be handy during projects:

 

LottieFiles

LottieFiles offers free and premium animations. But, what makes this site really special is that it provides you with an online Lottie editor and JSON editor. They help developers to create and personalize unique animations.

On LottieFiles, you’ll find exceptional courses to get into the Lottie world. By learning from experts, you will take your site’s interactivity to a whole new level. No matter if you’re a beginner or not, on LottieFiles, there is room for everyone.

 

Shape.so

This is one of the best websites for beginners. Shape.so offers over 33K of icons and illustrations that are fully customizable. So, changing existing icon colors to match your site design will be no trouble.

Shape.so offers three different plans. The free option only enables you to export PNG files, use the Free Figma Library, and it’s for personal use. The one-year plan costs $59 and provides you with full access to +33K assets. You can use it for commercial or personal projects, and you’ll get the complete Figma Library.

Finally, the lifetime plan costs $109. This plan offers unlimited upgrades forever, and it’s the best option if you like available animations. Of course, this plan also provides you with full access to +33K assets and the complete Figma Library. To make any payment, you can use your PayPal account.

As well as LottieFiles, Shape.so offers some video tutorials if you have no idea how to work with Lottie animations.

 

Drawer.design

Drawer.design is a Lottie Market made for busy people. This site won’t provide you with anything but high-quality animation packs. If you’re a busy designer, developer, or startup owner, this can be an excellent option to give your site an innovative touch.

Some packs are free, but in general, premium packs cost between $20 and $60 per pack. To buy an animation pack, you can use your credit card or your PayPal account.

 

PixelTrue

Unlike all previous places, PixelTrue does not offer Lottie packs or Editors. On PixelTrue, you can hire an entire design team to work on your site. The company offers many different plans. With the Hero plan, you’ll get 2 hours of daily design work, a project manager, and a whole design team. It costs $1049 per month, and no contracts are required.

The Superhero plan offers 4 hours of daily design work, a 4-members design team, and a project manager. It does not require a contract and costs $1899 per month. If you can give it a try, you can get a 14-day trial.

For organizations, the Enterprise plan would be the best fit. It includes everything in Superhero and offers over 6 hours of daily design work. PixelTrue aims to meet your needs. Therefore, there’s a “Pay As You Go” option if you only help with a few things. Unlike the rest of the listed sites, PixelTrue only accepts payments made by credit cards.

 

Final Words

In general, Lottie animations are an excellent way to improve the user experience, both from a performance standpoint as your site will load quicker than with a GIF and from the context they provide to the visitor.

And like I said, what’s best is that if you’re using Elementor for your site, you already have the work cut out for you with the Lottie widget.

Start moving to the top of the competition by making your websites more interactive and lighter than ever before and let me know what you think about Lottie in the comments!

Join the templace newsletter

Every week, you will be receiving the greatest tips, design inspiration and all the goodies related to Elementor.

Previous and next POSTS

Do you want powerful hosting?

Kinsta’s hosting solution will give you an incredible loading time, bar none. With their amazing server infrastructure, attentive customer support and just great user experience all-around, hosting your website with Kinsta will be a delight.

  • Blog
  • Project Application
  • Agency Plans
Want to learn about Elementor, web hosting, page speed optimization or web design? Click the button below to view all the articles!
Are you looking to build a new website for your business? One that will stand out amongst the competition? Click the button and start your project now!
Are you an agency owner overworked with web design clients? No need to worry about that anymore! Take a look at my agency plans for website design & development.
backgroundLayer 1

Home

The right clients, at the right price, anytime you want.

About

It takes 3 things for a program to create life-changing results.

Team

We have the skills you need to build a multi-million dollar business.

Contact

Helping coaches & thought-leaders all over the world.

You could use this for a mission statement or something else about your business that could really help people know more.

Navigation Menu

Newsletter (this is pretty important here!!)

Sign up to our newsletter

This guide is included in all template purchases, but you can get it here if that's what you only want