Interactive Animated Lottie is an app for adding Lottie based animations that can be triggered using a wide range of user interactions.

Basic Usage:

1. Add the Lottie Player widget to your website from the elements panel:

1. Click on the Widget and select the Setup planel.

1. Enter the URL to your Lottie into the top input. (There are several services for hosting Lottie Animations such as: https://lottiefiles.com/ , https://www.lottielab.com/ or self hosted).
2. Select a preset:
   1. Loop - will play the animation in a loop once the animation enters into the viewport (if the animation is in the viewport on page load it will start on scroll).
   2. Scroll - will play the animation as the user scrolls.
   3. Click - will play the animation when the user clicks on it.
   4. Hover - will play the animation while the user is hovered over it with the cursor.
3. Publish your site and enjoy!

Note: to remove the watermark please upgrade your app to Starter.

Advanced Usage (Pro only):

If you wish to take full control over the interactive experience, you can do so via the Advanced Settings panel. **Below is an overview of the advanced settings but please note that there are many permutations that are not all covered here. You can take a look at this Lottie Interactivity guide to gain a deeper understanding.

Note: Make sure you have no preset selected (None) to allow the Advanced Settings to take affect.

Triggers

1. Mode:
   1. Scroll - the animation will be triggered by the users scrolling action.
   2. Cursor - the animation will be triggered by the users cursor based action (such as clicking or hovering).
   3. Chain - allows several actions to be chained together. Only works with the ‘customActions’ property set via Velo code (see Developer Access below).
2. Type:
   1. Seek - the animation will play as the user scrolls or as the cursor moves across the animation. (Both modes)
   2. Play - the animation will play when triggered and had completed. (Scroll mode only)
   3. Loop - the animation will play in a loop once triggered. (Scroll mode only)
   4. Click - the animation will play when the user clicks on the player (Cursor mode only)
   5. Hover - the animation will play when the player is hovered on. (Cursor mode only)
   6. Toggle - the animation will play forward and backwards in tandem. (Cursor mode only)
   7. Hold - the animation will play when the player is hovered over and rewind when the cursor exits the player. (Cursor mode only)
   8. Pause Hold - the animation will play when the player is hovered on and pause when the cursor exits the player. (Cursor mode only)
3. Retrigger - when toggled on, triggering the animation again will restart it (vs. waiting for completion).
4. Visibility (start and end) - determines when the animation should start and stop based on the players visibility in the viewport. Note: changing this setting can affect the speed at which the animation plays.