How to Create Lottie Animations for LMS Embeds in 6 Simple Steps

If you’ve ever tried to drop a Lottie animation into an LMS and watched it stall, resize weirdly, or just… not play, I get it. The first time you do it, it feels way harder than it should. But once you know what your LMS expects (and what it rejects), it’s honestly pretty straightforward.

In my experience, the difference between “cool animation” and “why is this blank?” comes down to three things: keeping the JSON lightweight, loading the Lottie player correctly for that LMS, and testing in the actual embed environment—not just on your laptop.

Below is a practical 6-step walkthrough you can follow for LMS embeds, with copy-paste examples, real-world constraints I ran into, and a few tweaks that make the animations feel intentional instead of decorative.

Create Lottie Animations for LMS Embeds

Let’s start with the part that trips people up: LMS embed rules. Some LMS pages let you paste raw HTML/JS (usually via a “Custom HTML” or “Embed” widget). Others sanitize scripts for security, which means your animation won’t run even if your code is perfect.

Here’s what I recommend before you touch the animation file:

• Check what embed widgets your LMS allows (Custom HTML, Code Snippet, HTML block, etc.).
• Confirm whether external scripts are allowed (Lottie Web often loads from a CDN).
• Test in a “sandbox” page first, not directly inside a high-traffic lesson.

In my own testing, Moodle setups are usually strict about where scripts can run unless you use the right plugin/permission level. Canvas often works well with HTML blocks, but some schools enforce CSP headers that block external script hosts. Blackboard can be similar—so don’t assume “it works on my page” will mean it works inside your course.

One more practical tip: embed your animation on a simple test page first (just a basic HTML file on your server). If it doesn’t play there, the problem is your JSON or hosting—not your LMS.

If you’re still figuring out LMS limitations, it helps to compare platforms. For example, this guide on best LMS options for small businesses can point you toward systems that play nicer with embeds and integrations.

Create or Obtain Your Lottie Animation

Do you need to create your own Lottie animation from scratch? Not necessarily. If you’re building a course quickly, using a ready-made animation from a library can save a ton of time.

When I’ve created custom ones, I used Adobe After Effects with the Bodymovin exporter to generate JSON. That workflow is great when you want pixel-perfect alignment with your course branding (colors, icon style, motion timing).

But if you don’t want to wrestle with After Effects, you can grab something that already matches your use case. The Lottie Creator’s library (as one example) is a good place to browse—there are a lot of animations, and you can filter by vibe and complexity.

Here’s how I choose an animation for LMS use (so it actually helps learning):

• Keep it short: 1–3 seconds is usually plenty for “attention” moments.
• Prefer simple shapes over detailed scenes—small screens will blur detail.
• Match the message: icons for “step completed,” subtle motion for “loading,” and clear diagrams for “here’s the concept.”
• Avoid clutter: if the animation has 20 tiny elements, learners will miss it on mobile.

Also, don’t overdo autoplay. If everything moves at once, it becomes noise. I usually trigger on click or when the learner interacts—more on that in the embed section.

Prepare Your Animation File

Once you’ve got the animation JSON, you’re not done. This is where performance is won or lost.

Step 1: Check size. I aim for <1MB per animation for LMS pages. If your JSON is 3–5MB, you’ll feel the slowdown—especially on mobile networks.

Step 2: Optimize the JSON. Minifying can reduce whitespace and shorten keys depending on the structure. If you’re looking for a starting point, use JSON minifiers (or a JSON optimizer) and then re-test the animation in the browser.

Step 3: Host it reliably. Don’t rely on random file hosting. Put the JSON on your website server or a CDN so it loads fast and consistently across regions.

Step 4: Build a fallback. Some learners will be on limited bandwidth, and some LMS setups won’t run your script at all. So give them something useful.

Fallback approach (copy/paste idea): show a static PNG and only replace it with the animation if the JSON loads within a timeout.

• Create a static image “poster” for your animation (PNG or JPG).
• Use a timeout (for example, 2000–3000ms). If the animation hasn’t loaded, keep the poster visible.
• Respect reduced motion preferences when possible.

Here’s a simple embed example you can adapt. This version:

• Loads Lottie Web from a CDN
• Fetches your JSON
• Shows a static fallback if loading fails or times out
• Triggers playback on click (optional)

Copy/paste embed (HTML + JS):

<div>…</div> blocks are often allowed in LMS HTML widgets, but script tags may be sanitized. If your LMS blocks scripts, you’ll need a “Code Snippet”/“Custom HTML” area that allows JS, or you’ll have to use an allowed plugin. Test one page first.

Example:

<div id="lottie-wrap" style="max-width: 420px;">
  <img id="lottie-fallback" src="https://YOUR-CDN/path/poster.png" alt="Animation preview" style="width: 100%; display: block;" />
  <div id="lottie-player" style="width: 100%; aspect-ratio: 16 / 9;"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
  (function(){
    var container = document.getElementById('lottie-player');
    var fallback = document.getElementById('lottie-fallback');
    var jsonUrl = 'https://YOUR-CDN/path/animation.json';

    var reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reducedMotion) {
      return; // Keep poster image only
    }

    var timedOut = false;
    var timeoutId = setTimeout(function(){
      timedOut = true;
      // Keep fallback visible, don’t try to render
    }, 2500);

    var anim = window.lottie.loadAnimation({
      container: container,
      renderer: 'svg',
      loop: false,
      autoplay: false,
      path: jsonUrl
    });

    anim.addEventListener('DOMLoaded', function(){
      clearTimeout(timeoutId);
      if (timedOut) return;
      if (fallback) fallback.style.display = 'none';
    });

    anim.addEventListener('error', function(){
      clearTimeout(timeoutId);
      // Keep fallback visible
    });

    // Optional: play on click
    container.style.cursor = 'pointer';
    container.addEventListener('click', function(){
      anim.play();
    });
  })();
</script>

That’s the kind of “it won’t break your course” setup I like. If you want to keep it even lighter, set renderer: 'canvas' for some cases—but SVG is usually easier for crisp scaling.

Choose the Right Tools and Libraries for Embedding

This is where you pick the “engine” that renders your JSON.

I’ve had the best results using Lottie Web (the lottie-player that most people refer to). It’s stable, well-documented, and it gives you straightforward control over autoplay, loop, speed, and event listeners.

Here’s the setup I use most often:

• Lottie Web (CDN): load lottie.min.js once per page
• Renderer: typically svg for crisp visuals
• Autoplay: set to false if you want learners to trigger it (click/hover)
• Loop: keep it off for short instructional moments

One important LMS reality check: some platforms don’t like inline script tags, and some block external CDNs. If your LMS refuses the CDN script, you may need to host lottie.min.js on the same domain as your course (or use whatever “approved scripts” list your admin provides).

If you’re using a platform that supports modules/plugins for course content, that can help you avoid fighting script sanitization. Also, if you want to keep your setup lean, use the simplest embed widget your LMS offers—less HTML/CSS complexity = fewer layout surprises.

Finally, host your JSON and poster image on a fast server or CDN. I’ve watched animations “work” on desktop Wi‑Fi but fail on mobile because the JSON host was slow. It’s not always the code.

Implement Tracking and Analytics for Engagement

Animations are fun, but you should be able to answer one question: did this actually help?

In my testing, the simplest measurable interactions are:

• View (when the animation finishes loading and becomes visible)
• Play (when the learner clicks or taps)
• Complete (when the animation reaches the end frame)

Then you send those events to your analytics system. If your LMS already tracks engagement, you can use its reporting. If not, Google Analytics (GA4) is a solid default.

Example tracking (GA4-style):

<script>
  function trackLottieEvent(eventName, params){
    if (!window.gtag) return;
    window.gtag('event', eventName, params || {});
  }

  // After you create the animation instance (anim):
  // anim.addEventListener('DOMLoaded', function(){ trackLottieEvent('lottie_view', { animation_id: 'step1' }); });
  // container.addEventListener('click', function(){ trackLottieEvent('lottie_play', { animation_id: 'step1' }); anim.play(); });
  // anim.addEventListener('complete', function(){ trackLottieEvent('lottie_complete', { animation_id: 'step1' }); });
</script>

Event names I’ve used successfully:

• lottie_view
• lottie_play
• lottie_complete

Where to watch the impact depends on your setup:

• GA4: engagement per lesson, click-through, and whether “play” correlates with quiz attempts.
• LMS analytics: completion rate, time-on-task, and attempt counts (if your LMS exposes them).

Here’s what I actually look for when tweaking: if lottie_view is high but lottie_complete is low, learners are probably tapping it and bouncing early. That’s when I shorten the animation or change the trigger (for example, play on hover instead of click).

Test Your Embeds in Different LMS Settings

Testing is where you prevent the “it worked in my admin preview” disaster.

Before you roll out to all learners, test these scenarios:

• Different LMS pages: course announcement vs lesson page vs module item (scripts can behave differently).
• Mobile + desktop: at minimum, test on iOS Safari and Android Chrome.
• Common browsers: Chrome, Firefox, Safari, Edge.
• Slow network: turn on “Slow 3G” in dev tools to see if your fallback kicks in.

Also, check what happens when scripts are blocked. I’ve seen embeds fail silently when an LMS admin enforces CSP rules that block inline scripts or external CDN hosts. If that happens, your fallback poster should still show—so learners aren’t staring at a blank box.

One practical way to test quickly: create a short course with 2 pages—one with autoplay on, one with click-to-play. Then see which one keeps learners engaged without slowing down the page.

Maintain and Update Your Animations Regularly

Animations aren’t “set it and forget it.” Course content changes, branding changes, and sometimes your LMS changes its security rules after an update.

Here’s what I do for maintenance:

• Do a quick audit every few months: open the lesson on a mobile device and confirm animations still load.
• Re-check Lottie Web version: if you update the script source, test again.
• Refresh JSON if it got bloated: exporting again with fewer layers can cut file size noticeably.

If learners mention that something feels outdated or distracting, take that feedback seriously. And if the animation stops working after an LMS update, the first suspect is script permissions/CSP—not your JSON.

In other words: treat Lottie assets like any other course resource. They deserve versioning and a basic maintenance plan.

Additional Tips and Resources

Quick tips that save time (and headaches):

• Start simple: one animation per page section. If you stack 5 animations, you’ll pay for it in load time.
• Plan placement: animations work best near the action they explain (before a quiz question, right after a step, or as a “what to do next” cue). Use lesson planning resources to map that out.
• Match LMS capability: if your LMS struggles with scripts, choose an LMS that supports embeds cleanly. Here’s best LMS platforms for small businesses as a reference point.
• Accessibility matters: if the animation conveys meaning, provide an equivalent text description. If it’s decorative, keep it from stealing focus.
• Use feedback loops: adjust timing, size, and triggers based on how often learners actually play the animation.

If you want more examples, you can also check tutorials on creating and customizing animations at sites like Create AI Course.

FAQs