Tech Insights

Using Lottie Animations on Wix

Tue Mar 09 2021

2.gif
Blank_Canvas_on_Transparent_Background.p

Share

  • Twitter
  • Black LinkedIn Icon
  • Facebook

Learn about Lottie animations and how to add them to your Wix site.

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.

  1. Large library of 1000s of free available animations from creators on Lottiefiles.com

  2. Extra interactivity with your animations to speed up, slow down, loop and reverse

  3. 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.

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

Blank_Canvas_on_Transparent_Background.p

0

get certified.png

Related Posts

View All

1.png

CORVID LIBARY

Unified Database Management

Unified Database Management

Jun 18, 2018   8min

1.png

CORVID LIBARY

Unified Database Management

Unified Database Management

Jun 18, 2018   8min

1.png

CORVID LIBARY

Unified Database Management

Unified Database Management

Jun 18, 2018   8min