Interactivity on Editor X / Wix Editor using Velo

Lottie in Web
1

Hello colleagues. I have added a Lottie Animation (both as a custom element and as an iframe) to a Wix/Editor X website and it all displays correctly, but I am unable to add interactivity. I have also installed Lottie Interactivity via npm - I am new to code, can anyone please help me? Thanks!

2

Hi @andrei

check out this interactivity guide here to help you with the interactivity code: Lottie Player - Interactivity Guide

1 Like
4

Hey Andrei, I posted a short guide last week on how you can add Lottie Interactivity to your EditorX or Classic Wix Editor websites. To handle interactivity, you require access to the DOM, which means you need to use custom elements.

Here’s the docs - ClickUp. Right now, it’s as easy as installing on the site

5

Hi Derrell,

Thanks so much for taking the time to reply. That’s really helpful. We have already integrated Lottie with Editor X on a recent website we have completed.

The issue I am having is controlling the animation playback with scroll. Is that something that can be done?

Thanks so much!

Andrei

6

Hey Andrei! That’s exactly what the Velo package does. It allows you to handle the scrolling of Lottie Interactivity, separately from just playing the animation.

Here are two examples of it working on a Wix site - https://threedsoftware.com/scroll-alottie
https://inthemeta.space/events-calendar

7

Hi, Derrel, I can’t find Lix Lottie Components on npm, as described in your tutorial. Is the name of the package maybe changed? Thank you for your reply.