Hype LottiePlayer (with IDE preview)

This is a alpha version of a Lottie player for Hype. If your not familiar with Lottie then read about it here: https://airbnb.io/lottie/. Basicly you use After Effects and can do pretty awesome stuff. This is also a first attempt to include something more complex into the IDE and I must say we really need some callbacks as the most time implementing this was about ways to find reliable aproaches to monitor changes in the IDE. The Lottie player and the animations files can add up in size. Good thing, the player is written in a modular fashion, so you can exchange the full Lottie runtime for the version you want to use. This demo uses all three renderer (canvas, html, svg) so using only one of them makes it more lightweight.

Lottie/Bodymovin CDN
Lottie Runtime Index

Demo:
HypeLottiePlayer.html

Example Download:
HypeLottiePlayer.hype.zip

Source:
HypeLottiePlayer.js
HypeLottiePlayer.min.js

Version history
0.8 Alpha release under MIT-license

5 Likes

Here is a great online preview tool for iOS and Web.
https://lottie.cloud/

Just use this little “webapp” to preview files …
https://lottie.cloud/app/

I need to rewrite the IDE portion to a full HYPE_element Mutation Observer. Just got sick :sneezing_face::face_with_thermometer::sleeping:

Get well soon! Thanks for all your efforts here.

1 Like