In this lunchtime #WPQuickies, I show you where to find Lottie animations and how to add them to your WordPress website.
Sometimes adding a movement into a website can aid the user interface or gently nudge people to look in the right place.
Animations can also set up a scene or express more than words or a single image can convey.
What Are Lottie Animations?
A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets.
They are small files that work on any device and can scale up or down without pixelation.
Open-source and free Lottie players exist for the web, iOS, Android, Windows systems
Lottie got its name from Charlotte ‘Lotte’ Reiniger, German film director and the foremost pioneer of silhouette animation
Where Can I Find Lottie Animations?
You can find free and paid Lotties on the LottieFiles website at https://lottiefiles.com/
LottieFiles is a platform for testing, collaborating and discovering animations mainly catering to a community of animators, designers, developers and engineers
What Can a Lottie Do?
A Lottie can play your animation on the web or mobile devices while still maintaining a nice high quality.
It can also have smart settings that can allow for your animation to be interactive.
This depends on the player being used.
Examples Of Lottie Animations
How Do Lottie Animations Work?
If you were to look at a Lottie JSON file it would appear as a garbled mess of characters but these files contain the instructions for the Lottie player to render and play the animation.
The open-source Lottie player does all the heavy lifting and runs on the local PC’s browser so there are no server resources required.
From a technical perspective, Lotties are animated SVGs. The JavaScript player handles the SVG rendering and animation.
Here’s the beginning part of a Lottie SVG animation.
{"v":"5.8.1","fr":30,"ip":0,"op":61,"w":500,"h":500,"nm":"StarInHand_Baby_Astronaute","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Head","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[-8.2]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[0]},{"t":57,"s":[-8.2]}],"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-30.515,5.103],[1.79,-1.671],[28.025,-20.905]],"o":[[0,0],[30.516,-5.103],[0,0],[-21.611,16.115]],"v":[[-45.761,-77.956],[-7.221,-130.808],[53.378,-117.946],[-14.32,-106.471]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":20,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector
Open-Source Lottie Player On GitHub
If you’re a developer you can view and contribute to the open-source Lottie player on Github at this address https://github.com/LottieFiles/lottie-player
Adding Lotties Into WordPress Using Code
There are a few ways to add Lottie animations to your WordPress website.
First, if you are a developer, you can embed the Lottie player into your page template. There’s an excellent article on the LottieFiles website that shows you how to embed an animated submit button for Contact Form 7
Adding Lotties Into WordPress: Plugins
There are a handful of plugins that allow you to add Lotties into WordPress – most are included within a bundle of other features.
The cleanest of these plugins is https://wordpress.org/plugins/embed-lottie-player/ which adds a single block editor Lottie Player block.
Note: Lotties are text-based .JSON files and the WordPress media library won’t let you upload them without a bit of tweaking.
The easiest way to allow JSON files to be uploaded to the media library is to use https://wordpress.org/plugins/wp-add-mime-types/
Once you have activated this plugin, navigate to Settings > Mime Type Settings and add the line “json = application/json” to the “Add Values” box and save.
Now you can upload .JSON files directly into the WordPress media library.
Let’s get back to the Lottie Player block.
Download your Lottie .JSON file from the LottieFiles website then upload this to your WordPress media library.
You’ll need to copy the URL link to the uploaded Lottie file. Open the attachment in the media library and in the right hand side of the attachment details you will see a File URL field and a “Copy URL to clipboard” button. Click the button to copy this link to the clipboard.
Edit a page where you want your Lottie to be displayed, search for the “Lottie Player” block and drag one onto your page.
Paste the URL from your uploaded JSON Lottie file into the block “Lottie JSON file URL” field and you can tweak the other controls as needed.
That’s the simplest way to add Lotties to your WordPress page.
Adding Lotties Into WordPress: Elementor Pro
If you’re an Elementor Pro user, it comes with a Lottie Player element. Go ahead and edit any page with Elementor and search for the Lottie element and drag it onto your page.
You will get initial security warning about uploading JSON file. Elementor handles this upload, or you can still use the previous mime types plugin if you want to upload Lottie files outside Elementor Pro.
Once you have uploaded or chosen your Lottie, play around with the element controls to get your desired animation effect. Super easy!
By default, Elementor will render the Lotties as SVGs but you have the option to switch that to an HTML canvas element if you need to do that.
Adding Lotties Into WordPress: Embedded Script
If you don’t use the block editor or aren’t an Elementor Pro user there is another way to add Lotties to your website.
Navigate to the Lottie Files website URL https://lottiefiles.com/web-player and you can use their embedded player to host the Lottie animation.
All you have to do is embed the given code on your page where you want the animation to run.
Will Lottie Animations Slow Down My Website?
Not by much, most Lotties are under 200k and should be easily cached. The Lottie player and all its resources are about 500k.
The rendering is done in the local web browser so that won’t affect your web server or website page speed.
How Many Animations Should I Add To My Web Page?
If you need to ask yourself that question then you probably have more than you already need.
Everyone to their own but I like to add one subtle animation per page. I think more than that and you’ll be distracting your visitors from the page content.
Summary
That’s my introduction to adding Lottie animations to your WordPress website. Go have fun with it!
#WPQuickies
Join me every Thursday at 1 pm Sydney time for some more WPQuickies – WordPress tips and tricks in thirty minutes or less.
Broadcasting live on YouTube and Facebook.
Suggest a #WPQuickies Topic
If you have a WordPress topic you’d like to see explained in 30 mins or under, fill out the form below.
https://forms.gle/mMWCNd3L2cyDFBA57
Watch Previous WPQuickies
WordPress Global Settings & Styles Using theme.json
