top of page

Lix Components: Scrolling Lottie

Updated: 4 days ago

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

  1. Click the Install App Button

  2. Add to Site: Look for the "Add to Site" button on the app's details page and click on it.

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

  4. 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."

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

67 views0 comments

Recent Posts

See All
bottom of page