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

[MaxZieb (Loves Hype)]

Preview:
LottieWithHypeDataDecoratorExample.html

Download:
LottieWithHypeDataDecoratorExample.hype.zip

Code repository on GitHub

GitHub - worldoptimizer/LottieDecorator: Play Lottie files in your Hype project...

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

Including external files and Hype extensions · worldoptimizer/HypeCookBook Wiki

[MaxZieb (Loves Hype)]

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

Featured animations from our community

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 (Loves Hype)]

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

[theron_hp]

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 (Loves Hype)]

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]

Thank you. Appreciate your feedback.

[MaxZieb (Loves Hype)]

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

[MaxZieb (Loves Hype)]

↑ 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 (Loves Hype)]

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