So I saw that historically there has been a lot of questions/requests for Lottie exports. However, I'm not interested in that. I would like to know... Is there a way to simply drag/drop a Lottie (JSON) file into Hype and work with a Lottie animation? I've been using lottiefiles.com to obtain some ui icons. I would like to know how I can simply bring them into hype without having to do coding. I would prefer not to convert Lottie files to GIF because of the file size issues. Any help or comments on this, would be greatly appreciated!
I have noticed that it is not possible to play more than one instance of the same lottie-file in the same scene/parallel layout because of the unique ID requirement. Is there any option / other workflow or work around I'm not aware of to have multiple instances of the same lottie file playing in the same scene/in parallel layouts? It is easy with animated gifs or Spritesheets but I don't want to convert lottie-file to an animated gif because of quality degradation.
Actually, the internal Lottie ID is picked either by data-lottie-name or if that is not set by the ID of the element. Also, the word lottie is prepended. So, it should be unique, and I just duplicated the ape twice, and it does work? Sometimes the added preview in Hype chokes when changing parameters, but there is an easy fix. Just save, close and open the document again.
Check the file LottieDecorator.js to see where the ID is generated:
Could you elaborate? In your example, I see a GIF image. Do you mind sharing an example file or video, what and how you consider integrating Lottie by pasting in a rectangle.
You are actually using an iFrame. This is a valid way that could be compared to integrating a YouTube video over an embedded video. Beware, that this method is easy, but at the cost of missing control and adds the dependency on the lottiefiles server.
In that case, you don't need any of the code in your head HTML, though. You can safely delete it, as the browser anyway doesn't expect or officially handle custom tags for body in head.
If you don't mind the Lottie-Player living in an iFrame… here is an example HTML widget without nesting iFrames into each other, and it shows how to control the player in the iFrame (HTML-Widget):
PS: This still is loading the resources needed from the lottiefiles server, but that could be refactored to load from the resource library. Also, you have to deal with the sandbox implications like controls shouldn't work when opening it from the file system directly (file:// ).
