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:
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.
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.
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.
↑ 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).
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):
