Lottie player with live preview (made with Hype Data Decorator)

MaxZieb · March 14, 2021, 11:46pm

Preview:
LottieWithHypeDataDecoratorExample.html

Download:
LottieWithHypeDataDecoratorExample.hype.zip

Convert Lottie JSON files to LottieFiles.js (Optional)
This has less CORS restrictions and doesn't require a loading process for each file as they are all predefined on the window level once the JS file has loaded.

Code repository on GitHub

Version-History
1.0.0 Initial release under MIT-license
1.0.1 Fix for scenes and layout switching
1.0.2 Wrapped in IIFE, instance interface
1.0.3 Changed to data-lottie-data, now allows direct data
1.0.4 Small fixes and tweaks, stability, garbage collection
1.0.5 Removed leftover console.log statements

Content Delivery Network (CDN)

Latest version can be linked into your project using the following in the head section of your project:

<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/LottieDecorator/LottieDecorator.min.js"></script>

Optionally, you can also link a SRI version or specific releases.
Read more about that on the JsDelivr (CDN) page for this extension at worldoptimizer/LottieDecorator CDN by jsDelivr - A CDN for npm and GitHub

Learn how to use the latest extension version and how to combine extensions into one file at

MaxZieb · March 15, 2021, 4:40pm

Here is a bunch of Lottie animations you can use for free…

You can also create multiple timelines in you Lottie enabled Symbol and address them individually! Great for speed variations etc. in the future I would like to enable start and end frame somehow in timeline variations. Doing it on a symbol basis should be trivial, though.

MaxZieb · March 16, 2021, 8:43pm

↑ look at project
v1.0.1 Fix for scenes and layout switching

theron_hp · March 17, 2021, 6:36am

Hi @MaxZieb. Being able to bring Lottie into Hype is GREAT. I have a question. Why does the Lottie stop animating when I go take a look at the innerHTML code of the 'frame'?
I just open it and close it and then it stops.

MaxZieb · March 17, 2021, 6:55am

Because Hype overwrites the innerHTML of the node when you open the editor. This kills the Lottie player preview in the IDE. As I can't influence the IDE and there is still no API I can't tell the editor about our little "take over". So, just don't edit the innerHTML... I guess. As nothing really breaks apart of the preview just close and open the document again because there is no built in stage refresh option in Hype. I have a feature request on that but don't hold your breath on it (as the initial feedback was in my opinion hesitant, but never know maybe Tumult [re]considers it). Until then it is open and close to fix misfiring live previews. If you want to see what is going on in the node just preview it in the browser and then use the web inspector. If you are really curious then you could also enable WebKitDeveloperExtras and enable a stage inspector. And if you want to learn about what enables this look at the Hype Data Decorator project and that is heavily based on Mutation Observer.

theron_hp · March 17, 2021, 7:13am

Thank you. Appreciate your feedback.

MaxZieb · March 17, 2021, 12:08pm

↑ look at project
1.0.2 Wrapped in IIFE, instance interface
1.0.3 Changed to data-lottie-data, now allows direct data

MaxZieb · April 14, 2021, 8:53am

↑ look at project
v1.0.4 Small fixes and tweaks, stability, garbage collection
v1.0.5 Removed leftover console.log statements

Updated example file as well with test for the Lottie API (play, pause and toggle examples). If you need the full functionality or experience color or playback issues exchange the Lottie runtime with the full version. The example is still using the light version (often sufficient).

MaxZieb · September 10, 2021, 10:32am

↑ look at project
I annotated the example file and added a preview running on my server

MaxZieb · March 31, 2022, 9:47pm

CleanShot 2022-03-31 at 23.50.23

You can now use the Lottie JSON to JS animation data converter, previously only available as a Python file, directly in your browser (no server-side processing needed):

https://playground.maxziebell.de/Hype/Lottie/convert.html