Add animation to WordPress

Use a Lottie JSON file for a small animation that stays sharp as you resize it. You need somewhere to host the file and permission to add a script to your WordPress page.

Export the file

1. Open an example below in Mosso. Change its colours and timing.

2. Click Export. Under Where it goes, choose Website or app. Export the Lottie JSON file.

3. Upload the .json file to a public address on your site or your file host. Open that address while signed out to check that it returns the animation file.

Add it to your page

After export, open Use it on your site and copy the HTML code. In WordPress, add a Custom HTML block where you want the animation. Use your uploaded file address in the code. This example uses the same expression-free player as the Mosso export snippet:

<div id="animation" role="img" aria-label="Loading"
  style="width:100%;max-width:400px;aspect-ratio:1"></div>
<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.12.2/build/player/lottie_light.min.js"></script>
<script>
  (() => {
    const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
    const player = lottie.loadAnimation({
      container: document.getElementById('animation'),
      renderer: 'svg', loop: true, autoplay: !still,
      path: '/uploads/animation.json'
    });
    player.addEventListener('DOMLoaded', () => {
      if (still) player.goToAndStop(0, true);
    });
  })();
</script>

Replace /uploads/animation.json with your real file address and use a different element id for each animation. Change the accessible name to describe what the animation shows. Keep essential text outside the animation.

If it does not show

WordPress can block JSON uploads or strip script tags when your role or host does not allow them. Ask your site administrator to host the JSON file and add the player through the theme or an approved plugin. If you cannot add scripts, export a GIF and use an Image block.

Check the published page while signed out. A file on another host needs permission for your page to fetch it. If the player is blank, check the file address and browser console, then try the file in the Lottie viewer.

WordPress documents the script permission rules in its Custom HTML block guide.

Free downloads and editable examples

The editor and every export format are free, with no card and no Mosso watermark. Library downloads need a free account. You can download up to 50 library animations a day, with the limit resetting at midnight UTC. Each download contains one animation.

Open an example below to try its look. Use its download buttons to get Lottie JSON or dotLottie through your account, or choose Edit this in Mosso to change the layers and export another format. A preview file is for playback, not an account download link.

Create a free account or sign in to download from the library. Read the library licence before sharing the finished work.

See the full export guide