About
The Interactive Lottie Component lives under the Lix Components library from Threed Software, a library of extensions to Wix basic functionality, using Custom Elements.
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!
This component is a part of the Lix Components Library.
Demo
You can see a live example of the Lix Interactive Lottie components below.
Add To Your Site
Click the Install App Button
Add to Site: Look for the "Add to Site" button on the app's details page and click on it.
Choose Your Site: If you have multiple websites associated with your Wix account, a pop-up will appear asking you to select the website where you want to add the app. Choose the relevant website and click "Add to Site."
Configure App Settings: After adding the app, you may be directed to the Wix Editor. If not, go to your Wix Editor by logging into your Wix account and clicking "Edit Site."
Access the App: Once in the Wix Editor, locate the app's icon or element on your website. This could be a widget, button, or other UI element depending on the app's functionality.
Usage In Wix
1. Setting An Animation Via Code
2. Listening To Events And Responding with Velo
3. Changing The Mode To Cursor Mode (Hover Effect) after 4.5 seconds
API Documentation
Properties/Attributes
Property Name | Attribute (to be used in Wix) | Description | Type | Default |
animationFile (required) | animationfile | URL to Lottie Animation. | string | |
mode | mode | The play mode that triggers the animation. This can currently be either scroll or cursor | string | 'scroll' |
height | height | The height above and below the component, written in CSS. It can be in any CSS supported height measure including px, % and vh. | string | 500px |
Events
The following events are exposed and can be listened to via the on() function for Wix Custom Elements. See how to use the on event handler here.
Implemented? | Name | Description |
✔ | load | Animation data is loaded. |
✔ | error | An animation source cannot be parsed, fails to load or has format errors. |
✔ | ready | Animation data is loaded and player is ready. |
| play | Animation starts playing. |
| pause | Animation is paused. |
| stop | Animation is stopped. |
| freeze | Animation is paused due to player being invisible. |
| loop | An animation loop is completed. |
| complete | Animation is complete (all loops completed). |
| frame | A new frame is entered. |