Forum Academy Marketplace Showcase Pricing Features

Need help, lottie animate on scroll - HTML element errors

Hey everyone,

I need some help getting Lottie animations to play related scroll inside a Bubble HTML element.

This is what I’m trying to achieve: Lottie Player - Interactivity Guide. Using their libraries the animations will progress based on their visibility on the page. There is an existing Lottie plugin, but it does not seem to offer the ability to animate on scroll.

I’ve also tried using the Bodymovin library without success: Lottie Docs

Taking their code snippets will load just fine if saved as an HTML file and loaded into a browser outside of Bubble. However, when they are used within Bubble they will display the Lottie animation but throw an error in console “Lottie Interactivity is undefined” or other various errors and anything to do with interactivity won’t work.

I’ve tried as many combinations as I can think of over the last few days including trying to build my own plugin for this, but it just won’t budge. I’ve tried loading scripts into the header, using the Loaderr plugin, using different HTML elements, etc… but without any progress.

Really appreciate any help/guidance/clues/ideas. After a few days of searching the internet and trying combinations of things I’m just out of ideas on my own. My JS/web dev skills are fairly limited which is likely the issue here.

If we can figure this out I’ll make some content/guide to help others too since Lottie + Bubble seems like a really slick combo.

Thanks for any help,

Adam


More info:

Here is a starting place of pieces I’ve been using in different ways:

<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js"></script
<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-interactivity.min.js"> </script>

<!-- Both of these libraries seem to load. -->

<lottie-player id="firstLottie" src="https://assets4.lottiefiles.com/private_files/lf30_csdufwaz.json" style="width:400px; height: 400px;">"> </lottie-player>

<!-- It seems to fail around here because it can’t find LottieInteractivite.create. I've tried importing this, but that throws different errors about modules... -->
<script>
LottieInteractivity.create({
    mode: "scroll",
    player: "#firstLottie",
    container: '#MyContainerId',
    actions: [
    {
      visibility: [0,1],
      type: "seek",
      frames: [0, 20]
    }
  ]
});
</script>

Here’s the main error I get:


Here are some combinations I remember trying so far:

  • Many different animation links, pretty sure this is not the issue since all of them work outside of Bubble, and load into the pages without interactivity.
  • Bringing in libraries using Loaderr plugin.
  • Bringing in libraries in the Bubble page header.
  • Script in another element to the animation “Lottie-player”.
  • Everything in one HTML element.
  • Changing type of the interactive library to “module”.
  • My own custom plugin (currently blocked with issues with initialization). I wrote a post on this too, but maybe it won’t be needed if there is a simpler solution - Lottie animate on scroll, need help finishing plugin

This topic was automatically closed after 70 days. New replies are no longer allowed.