Wix Editor: Customizing and Adjusting Your Lottie Animation

3 min read
After importing a Lottie animation, adjust it to look and behave how you want. You can decide whether it plays in a loop or just once, and apply an effect so the animation stands out when the page loads. 
In this article, learn how to:

Changing your Lottie animation

If you want to change your Lottie animation, you can easily do so by pasting a different URL in the element's settings panel. 

To change the animation:

  1. Sign in to your LottieFiles account and copy the animation's link
  2. Click the Lottie element in your Editor.
  3. Click the Settings icon .
  4. Paste the new URL under What's the animation's URL?.
  5. Press Enter on your keyboard.
The Lottie settinga panel. The cursor is hovering over the URL field.
Tip:
Clicking Change Animation takes you directly to LottieFiles in a new browser tab.

Setting the animation to play in a loop

Depending on your site's feel, you may want to set the animation to play in a loop. This means that it plays continuously while visitors are on the page. You can also turn the setting off, so it only plays once when your pages loads

To enable / disable a loop effect:

  1. Click the Lottie animation in your Editor.
  2. Click the Settings icon .
  3. Click the toggle next to Plays in a loop to turn it on or off.
The lottie settings panel. The cursor is hovering over the 'Plays in a loop' toggle.

Adding additional animation effects

Lottie embeds come with their own animation effects. However, you can add an extra entrance animation from the Wix Editor. These effects appear when your site loads, and don't cancel or prevent the original animation from playing.

To add additional animation effects:

  1. Click the Lottie animation in your Editor.
  2. Click the Animation icon .
  3. Select an effect from the panel.
  4. (Optional) Click Customize to adjust the effect's settings.
The animation panel. The cursor has clicked the 'Turn-in' effect.
Changed your mind?
You can remove the extra animation effect by clicking None in the panel.

Adding alt text to your Lottie animation

Alt text is a written description of your element. By adding alt text to your Lottie animation, you ensure that it can be read by screen readers and search engines, which can improve your site's accessibility and SEO ranking.

To add alt text to your animation:

  1. Click the Lottie animation in your Editor.
  2. Click the Settings icon .
  3. Type or paste the text description under Write alt text for your animation.
  4. Press Enter on your keyboard.
The lottie settings panel. The cursor is hovering over the alt text field.

Did this help?

|