Scrolling Lottie
LIX
This package allows you to use the Lottie Interactivity library on your website, controlling your animations with user events such as hover, clicking and scrolling. The goal is to make animations on your site that much more epic!
Tango Visual Installation Guide
Once you've installed the package, you can begin setup and be completed in 4 minutes. We've created personal bundle files for you to use within your own website.
Because the core component of making this work is the Custom Elements, it's important that you use the steps below to make it work on your site.
This component is a part of the Lix Components library, which means to install it on your own website, you'll need to get a free LixComponents Access Token in order to install it on your site
​
SetupÂ
Sign up for a free LixComponents Subscription
Copy your free token on your account page - My token
Copy the CDN URL -Â https://cdn.threedsoftware.com/lottie?
Append the token to the end of the URL as a query parameter
​
Installation​
Install the Lottie Interactive Component using the Custom Element. Please note that in order to use a custom element on your site, you'll need to have a premium plan attached to your site, and a domain.
Ensure the Custom Element is on "Server URL"
Paste your URL into the Server URL field, with the token at the end. It should look like https://cdn.threedsoftware.com/lottie?token=mytoken​.Â
Edit the Tag Name to lix-lottie
💡 Important to note. CDN URLs will also support version query parameters at a future date. When version is excluded, the latest version of the component will be provided.
​
Select Animation File
To see this component at work, you can choose any free animation from the 1000s available on lottiefiles.com and copy any Lottie animation's URL, the one that ends in .json.
In the custom element settings, you can set the attribute 'animationfile' to update the animation on the screen. This can also be set dynamically using Velo whenever needed. See the documentation for more here - https://www.wix.com/velo/reference/$w/customelement/setattribute.
​
Usage
Setting An Animation Via Code
 Listening To Events And Responding with Velo
Changing The Mode To Cursor Mode (Hover Effect) after 4.5 seconds
​​