using Lottie animations with velo code

Ask the community
,
1

hi
i wanted to use a lottie animation. i understood quite nothing from their interactivity guide as someone who knows very little about coding. anyways, i wanted the animation to start as soon as i hover over a box. i asked AI to write the code for me and i think it is fine, its just that i dont understand how to install the library into wix. or is it already installed? i have no idea. heres what i did:

  1. added a code element

  2. under animations → lottie

  3. pasted the url to the desired animation

  4. pasted the code AI made for me
    annnnnd it didnt work. any guidence would be very helpful, thank you!

$w.onReady(function () {
  const lottieElement = $w('#lottieEmbed1'); // Replace '#lottieEmbed' with the actual ID of your Lottie embed element

  // Set the initial state of the Lottie animation
  lottieElement.setProps({ "fromFrame": 0, "toFrame": 0 });

  // Add a hover event handler to the box element
  $w('#box7').onMouseIn((event) => {
    // Start the Lottie animation and play it from frame 0 to frame 88
    lottieElement.setProps({ "fromFrame": 0, "toFrame": 88 });
    lottieElement.play();
  });

  $w('#box7').onMouseOut((event) => {
    // Stop the Lottie animation and set it back to frame 0
    lottieElement.setProps({ "fromFrame": 0, "toFrame": 0 });
    lottieElement.stop();
  });
});
2

anyone??