Help Center
    Help Center
  1. Creating your site
  2. Using Editor X
  3. Adding effects and animations
    4. Editor X: Adding and Customizing Lottie Animation Files

Editor X: Adding and Customizing Lottie Animation Files

4 min read
Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio
Lottie Files is a great source for high-quality animations that you can add to your Editor X site. After importing the animation through its URL, you can resize it as needed and decide whether or not it plays in a continuous loop. 
In this article, learn how to:
Before you begin:
In order to import an animation, you need have a LottieFiles account. 

Importing animations from LottieFiles

You can import as many Lottie animations as you need to liven up your design. Once you add a Lottie embed element to Editor X, paste the animation's URL in the Settings panel to see how it looks on your page. 
Working with breakpoints:
You can customize the size of your Lottie animation per breakpoint, so it looks ideal on every screen. 

To import a Lottie Animation:

  1. Click Add Elements at the top of Editor X.
  2. Click Embed & Social.
  3. Click Lottie Embeds.
  4. Drag the element under Lottie Embeds to the desired location on your page.
  5. (In a separate tab) Copy the animation's URL from LottieFiles:
    1. Log in to your LottieFiles account.
    2. Click Save to workspace to generate.
    3. Click the Copy icon under Asset link.
  6. Paste the animation's URL in Editor X:
    1. Click the Lottie Animation element in your Editor.
    2. Click the Settings icon .
    3. Paste the URL under What's the animation's URL?.
    4. Press Enter on your keyboard.
Changing the Lottie animation URL from the element's Settings panel, after adding it to your Editor X site
What's next?
See how your animation plays by clicking Preview animation at the top of the Settings panel.

Changing your Lottie animation

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

To change the animation:

  1. Click the Lottie animation in Editor X.
  2. Click the Settings icon .
  3. Paste the new animation's URL under What's the animation's URL?.
Changing the Lottie Animation URL from the element's settings panel in Editor X

Setting your animation to play in a loop

You can choose how your Lottie animation plays – only once, or in a continuous loop. 

To set how your animation plays:

  1. Click the Lottie animation in Editor X.
  2. Click the Settings icon .
  3. Click the toggle next to Plays in a loop to turn it on or off.
Clicking a toggle to set a Lottie animation to play in a continuous loop.

Adding alt text to your Lottie animation

From the Settings panel, add alt text to briefly describe your Lottie animation. This can improve your site's SEO ranking while helping users with screen readers to understand what your animation is showing. 

To add alt text to your animation:

  1. Click the Lottie animation in Editor X.
  2. Click the Settings icon .
  3. Type or paste the text description into the field under Write alt text for your animation.
  4. Press Enter on your keyboard.
Writing alt text for a Lottie animation in the element's Settings panel in Editor X.
You should know:
Lottie animations are automatically converted to JSON files when you import them to a Wix site. For technical reasons, not all of the file fields can be contained. Lottie animations may therefore look slightly different on a live Wix site (e.g. displaying a reduced range / amount of motion). 

Did this help?

|
In this article
  • Importing animations from LottieFiles
  • Changing your Lottie animation
  • Setting your animation to play in a loop
  • Adding alt text to your Lottie animation

Related content

Editor X: Adding Animations to Your Site
Editor X: About Click and Hover Interactions

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched