Overview
Every once in a while, a new piece of technology comes around that radicalizes the way things are done. Peter Thiel would call them 0 to 1 solutions, because these solutions show a new way of thinking about solving an existing problem. Think smart speakers, electric cars and robot vacuums.
Lottie Animations fall into that category. This way of adding complex animations to your websites or mobile apps is going to be the future. Let's find out how, when and why to use Lottie on your Wix website, with little or no coding!
TL; DR
Lottie animations are made up of JSON files that tell an embedded player how to show the animations on your website/app. It can be used on Web, Android, iOS, Windows and macOS.
Because each JSON file is a series of timings and layers, it can be much lighter than looping a GIF/video, and each animation can be sped up, paused, hovered and even reversed through simple JavaScript. They are vector images, so making it scale won't mean pixelation.
You don't have to start from scratch, there are thousands of free animations for you to make interactive on lottiefiles.com.
With Lottie, you can do this:
Simple mobile-friendly onboarding animations built with Lottie (Source: https://github.com/airbnb/lottie)
OR this:
Simple mobile-friendly onboarding animations built with Lottie (Source: https://github.com/airbnb/lottie)
Alright alright, how do I do this?
Why Lottie Exists
Lottie came out of the 🧠 s over at Airbnb. Their lead motion designer & a handful of engineers found it very frustrating to come up with a beautiful but complex design and having it butchered by developers by conversion to low quality GIFs or CSS animations.
🦁 ≠🐱
Lottie allows the high quality animations created in Adobe After Effects to be exported as a JSON file, using an AE special plugin called bodymovin. Not only that, but the size of the data transferred over the network is typically MUCH smaller than loading a high quality GIF, and the animation is natively rendered on each platform.
So instead of it being a recording of your animation, like a DVD, it's more like you're actually at the theatre watching the show live. It means you can also "stop" what's happening on stage, as we'll see below.
Best of all, it's an open source project, so anyone can get started creating their own animations. (If you want to get more advanced, you can check out a great article by Vera Sprenne about designing your own Lottie animations).
Why Use Lottie On Your Site
The three main reasons to use Lottie animations on your Wix site.
Large library of 1000s of free available animations from creators on Lottiefiles.com
Extra interactivity with your animations to speed up, slow down, loop and reverse
It’s becoming the industry standard. Get ahead of it.
*3+. You can actually edit the colors of the animation to match the theme of your website!
How to get started
I've included two ways for you to get started with Lottie on your site, whether you're just testing it out on a free site, or are implementing it on your main site. It's easy either way!
The first thing to do is to find a free animation you want to use on Lottiefiles.com
I'm going to work with this animation - https://lottiefiles.com/45310-proyecto-1 for demo purposes, but you can use literally any which you find, and like.
(Option 1) Paid Site - Use A Wix Custom Element
Create Custom Element in Editor. This must be done on a Wix site with a premium plan, and a connected domain.
Set the script source to Server URL, and paste the URL of the custom element for the Lottie Player - https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js. Lottie Player is the prebuilt library that renders animations on your website. We also need to set the Tag Name of the element to lottie-player.
For more information on creating a Custom Element in the Wix Editor visit the guide here.
On your selected animation, select the <html> button to view the code required for the embedding on a website.
This will take you onto the page with the Lottie Player's embeddable code. This is the section we'll use as a guide on how to implement our Custom Element.
We're going to copy the URL of the Lottie Animation file and start to populate our Custom Element in Wix. After Clicking on Set Attributes, create the following attributes:
Set src to the lottie animation URL (e.g. https://assets6.lottiefiles.com/packages/lf20_4o5pj8pw.json)
Set background to transparent
Set speed to 1
Set loop to true
Set autoplay to true
You can also set the other fields seen in the embed page on the Lottie Files website, including controls , hover and direction if you wish to, but we'll leave these defaults for now. You should see the following screen below. You can test out your animation in preview mode. Unfortunately, the style keyword is not supported when setting the attribute of a Custom Element.
(Option 2) Any Site (Free or Paid) - Wix HTML Element
This option allows you to drop a Lottie element onto any of your sites without much trouble, and is simpler than the method above using custom elements. You still receive the same options for interactivity as the Custom Element method, but there are both pros and cons of using this HTML Embed approach.
Pros
You simply need to copy and paste the code from the embed page on lottiefiles.com
You can use the style attribute to control the sizing of the element
With a bit of extra coding you can implement some* of the awesome lottie-interactivity feature.
Cons
You can't change the attributes directly from your Velo code, without writing some special JS code to speak to the embedded element. It's pretty much as is.
Copy and paste the code below into the HTML Embed element. It will trigger the animation on hover.
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets1.lottiefiles.com/datafiles/HN7OcWNnoqje6iXIiZdWzKxvLIbfeCGTmvXmEm1h/data.json" background="transparent" speed="1" style="width: 100%; height: 100%;" hover loop></lottie-player>
Extra Lottie Customizations
Velo Time ⏰
The extra cool part about if you did this using a Custom Element, rather than just an HTML Embed, is that you can control how the animation plays with your own Velo code.
For example, if you wanted to change the speed of the animation, you could write
$w("#customElement1").setAttribute('speed','1.5');This will tell the custom element to update it's property with the new speed, and quickly re-render the animation. Please note: the ID "#CustomElemnt1" should be replaced by the ID of your custom element if it's different on your site
To remove an existing property, simply unset it using the same function
$w("#customElement1").setAttribute('speed');Editor X Support
As of now, Custom Elements are not supported on Wix's Editor X platform. You can still use Lottie Animations, but you'll need to use the HTML Embed - See Below
Lottie Demo
Written by Christopher Derrell - Head of Web Development at Adtelligent & Wix Velo Master. Connect with me on LinkedIn.
This post was also published on Medium.
Resources & Referenced Links
