Need help with creating a CMS Lottie Gallery

Design help Custom code
1

HI all! I hope someone can help me solve this pickle :slight_smile:

so I am trying to create a CMS gallery with lottie animations that I have created. I have a CMS collection that with fields that provide lottie URL (from lottiefiles) and then other variables that I can set on a per CMS Item basis (i.e. loop, controls, autoplay, hover, etc…) and each of the CMS items has a HTML Embed that contains the following code:

<lottie-player
  loop = "true"
  src="https://assets1.lottiefiles.com/packages/lf20_04k3nw3k.json"
  hover="true"
  background="#383838"
  mode="normal"
  renderer = "svg"
  rendererSettings: {
    filterSize: {
      width: '200%',
      height: '200%',
      x: '-50%',
      y: '-50%',
    }
></lottie-player>

and the various variables are set in the collection item.

There is an additional embed that is outside of the collection which adds the JS script source. So my problem is the following, I have another part of the script that I need to include, that will set the start frame for each of the animation (some of my animations are loops which start/end with an empty frame so I would like to set a static hold frame for each animation so that before any hover events they will show something and not sit empty:

<script>
      const player = document.querySelector("lottie-player");
      player.getLottie().goToAndStop(20, true);

      player.addEventListener(
        "mouseover",
        function (event) {
          player.stop();
          player.setLooping(true);
          player.play();
        },
        false
      );
      player.addEventListener(
        "mouseout",
        function (event) {
          player.getLottie().goToAndStop(20, true);
          player.setLooping(false);
        },
        false
      );
    </script>

where I need the frame numbers (20) to be dynamically set with the figure that I will include in each CMS item - BUT if I include this script in the HTML embed it doesn’t work since it calls for the player multiple times (for each CMS item on the page) and I not sure how to get around this…

I hope I have explained my problem with sufficient clarity - any insight and/or suggestions will be greatly appreciated!

Here is my site Read-Only: (https://preview.webflow.com/preview/mograph?utm_medium=preview_link&utm_source=designer&utm_content=mograph&preview=01aafb7cec108e1b262b961686b3402c&pageId=609e92c965fead4ade4a9138&mode=preview)

2

I am still holding onto hope that someone more knowledgeable than I am with webflow cms and JS could help me with this… please!

I had another thought on how to achieve what I want but I still would need some JS help… so if I keep the script outside of the CMS collection and address each collection item by its individual slug like so:

const player = document.getElementById("animation-01");
      player.getLottie().goToAndStop(20, true);
const player-02 = document.getElementById("animation-02");
      player.getLottie().goToAndStop(50, true);

and then I add the start frame value (which is set inside each collection item) to each collection item, but make it display:none. Then I would need the script to take that value and add it to the relevant place in the script… and this I don’t know how to do… so perhaps this could be a solution (which I still would need help with)

Thanks in advance! :pray: