Incorporating animations into your WordPress website is a great way to liven up a tired web page and keep your visitors engaged throughout their time on your site. An easy and efficient way to do this is by using lottie animations: high-quality, lightweight animations.
Lottie animations are increasing in popularity for numerous reasons, and if you are ready to jump on the bandwagon and spruce up your website, they just might be for you.
There are a few different ways to create these animations and smoothly add them to your WordPress site.
What are Lottie Animations?
Lottie is a library for Android, iOS, Web, and Windows that renders After Effects animations and allows the animation data to be exported as JSON files as opposed to a typical image file type. In short, they can easily replace a static asset with something fun and engaging.
This open-source solution was first introduced by the team at AirBnB, but it is quickly picking up in popularity with designers and animators across different markets. One big advantage of using lottie animations in your WordPress website is that the file size is very small compared to GIF animation or mp4 files. Additionally, the flexible animation format allows the browser to handle the rendering.
The many possibilities for using lottie animations is one reason they are so popular. You can use lottie animations as animated headers, buttons, eye-catching graphic elements, and more. You can also set the animation to trigger as visitors scroll, hover, or click on the web page. Their versatility and easy implementation for both B2C and B2B websites make them a game-changing way to improve the quality and overall look of your web design.
Creating Lottie Animations
When considering whether to add lottie animations to your site, you’ll first need to decide whether to do a stock or custom approach. Each has its pros and cons, so it’s wise to consider both options before deciding.
With any type of animation, less is always more. When incorporating an animated element into a website redesign, consider what role that animation is serving in the customer’s journey.
Custom Lottie Animations
If you are looking for a custom lottie animation for your website, you’ll need to work with an animator or designer who specializes in Adobe After Effects and is familiar with this type of animation.
A lot of lottie animations use an illustration-style, so you’ll need to decide whether this fits with the website’s branding and style before moving forward with it. Once you decide on the graphic elements and animation effects, the animator will need to create the custom animations in Adobe After Effects and export them as lottie animations, using the After Effects extension. This will render a high-quality animation that can easily be implemented into your site.
One reason that lottie animations are high-quality is that the creation process eliminates any need for a developer or engineer to recreate the designer’s animation in a web format. It offers a ready-to-use solution that makes implementing animations easier than ever.
Stock Lottie Animations
Stock lottie animations are a great option if you want to expedite your new design. You can look for an existing stock lottie animation and if need be, customize it to fit your brand.
Lottie Files is a stock website where you can find a large number of free and paid lottie animations. The site also offers an editing tool where you can edit the colors of the animation before downloading. If you need to change a large number of colors in an animation, a skilled animator or designer can also use Adobe After Effects to make those changes more efficiently and export the animation.
If you are looking to implement numerous animations on a site, or if you have a very specific site aesthetic, it may be difficult to find multiple stock options in the right style. In this case, you can consider hiring an animator for the creation of more animations that fit your site and match the stock options you’ve already chosen.
With any type of stock animation or graphics, keep in mind the licensing requirements for the stock animations and make sure to contribute the animation to the original designer if it’s required.
Adding Lottie Animations in WordPress
It is a pretty smooth process for adding lottie animations to a WordPress website. You can either utilize a custom HTML widget to add the animation code to the site, or utilize a WordPress plugin to add the animation.
Custom HTML Widget
A skilled WordPress developer can use a small JavaScript library and a custom HTML widget to add the lottie animations to the site. You’ll start by uploading the lottie.min.js script along with the animation .json file and any image assets to the theme folder. Then there is a small snippet of JS to add to the widget to initiate the Lottie script, which loads the .json animation file into the desired container div.
This streamlined approach can be a great fit for most WordPress sites because it avoids weighing down the site with additional WordPress plugins. When adding the lottie animations, you can also control whether the animation loops, how many times it loops, and what may trigger the animated element on the page.
Most of the plugins for adding lottie animations without a developer’s assistance require the Elementor page builder, so the custom HTML approach tends to work better if you are using a theme or page builder plugin other than Elementor.
Adding elements to the site without a plugin is also better for website speed and performance since adding more and more plugins will weigh down the site.
WordPress Plugin Options
If you don’t want to use a developer to do it the custom way, another option to add lottie widgets to your site is to use a WordPress plugin.
Elementor Pro – Lottie Widget
Elementor is a page builder for WordPress with drag and drop features, and the Elementor Pro license includes the Lottie widget. With this widget, you can add lottie animations without code and customize the dimensions and behavior of the animation. This plugin conveniently connects with the Lottie Files stock website, so you can easily select stock animation options directly from the site or upload your own creations.
Gutenberg Blocks – Ultimate Addons
If you are using the Gutenberg editor on your site, the Ultimate Addon plugin for Gutenberg can be a good choice for adding lottie animations with the help of a plugin. The Gutenberg editor has been part of the WordPress core since WordPress 5.0 release, however it isn’t the most popular. Many sites still use the classic editor or other page builders like Site Origin, Elementor or Beaver Builder, to name a few.
Nonetheless, it’s a viable option. The Ultimate Addons for Gutenberg is a well-reviewed plugin and offers a lot of great features, including the option to add lottie animations and control advanced options, such as the animation speed and trigger.
Additional WordPress Plugins
There are additional plugins available in the WordPress directory for adding and customizing lottie animations. Keep in mind that some of the plugins require that your site is built and using Elementor, such as Premium Addons for Elementor and Elementskit Addon for Elementor. There are also plugins that are meant for other WordPress themes and builders, such as the Divi theme or Gutenberg blocks.
Time to Get Animating
Lottie animations are extremely accessible to anyone with a WordPress site. Whether you want customized animations or stock animations, hero animations or scrolling ones, the resources are at your fingertips.
You get to be creative in how you want your animations to look and what you want them to do, and when you start to explore the possibilities of lottie animations, you will start to realize just how much they can add to the quality of your website.
