# Can p5.js output valid lottie-files?

**URL:** <https://discourse.processing.org/t/can-p5-js-output-valid-lottie-files/10134>\
**Category:** Libraries\
**Created:** [April 9, 2019, 10:40am UTC](https://discourse.processing.org/t/can-p5-js-output-valid-lottie-files/10134 "2019-04-09T10:40:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![oivvio](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/oivvio/32/4518_2.png) [@oivvio](https://discourse.processing.org/u/oivvio)\
**Post date:** [April 9, 2019, 10:40am UTC](https://discourse.processing.org/t/can-p5-js-output-valid-lottie-files/10134/1 "2019-04-09T10:40:36Z")

</div>

On a related note: Is it possible have processing output valid lottie-files?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 9, 2019, 11:01am UTC](https://discourse.processing.org/t/can-p5-js-output-valid-lottie-files/10134/2 "2019-04-09T11:01:57Z")

</div>

No idea…

I even don’t know what lottie can import

Maybe somebody else knows this

Sorry!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 9, 2019, 3:20pm UTC](https://discourse.processing.org/t/can-p5-js-output-valid-lottie-files/10134/3 "2019-04-09T15:20:53Z")

</div>

I’m not aware of a library to do that. Where are lottie-files documented? What is the file format like?

…I did find a project on github that lists both p5js and lottie, perhaps look at its code…

> **[fffiloni/soundkit-mograph](https://github.com/fffiloni/soundkit-mograph)**
>
> A soundkit keyboard that fires sounds and motion graphics, using P5 and bodymovin. - fffiloni/soundkit-mograph

---

<div class="post-metadata">

**Author:** ![oivvio](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/oivvio/32/4518_2.png) [@oivvio](https://discourse.processing.org/u/oivvio)\
**Post date:** [April 9, 2019, 3:54pm UTC](https://discourse.processing.org/t/can-p5-js-output-valid-lottie-files/10134/4 "2019-04-09T15:54:44Z")

</div>

I haven’t found any documentation of the format. But since there are open source implementations for running these files on various platforms the format must be open.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 9, 2019, 4:51pm UTC](https://discourse.processing.org/t/can-p5-js-output-valid-lottie-files/10134/5 "2019-04-09T16:51:20Z")

</div>

Looks like the documentation (such as it is) is here:

> <https://github.com/airbnb/lottie-web/issues/575>

The whole thing looks like it built around AfterEffects and timeline-based interpolation. That isn’t how p5.js animates – it is frame-based. You could write a “dumb” animator that dumped sketch states into lottie JSON frame objects at 60fps (triangle! triangle! triangle!), but that is going to be a BIIIIIIIIG JSON file and create a very poor performance animation.

So there probably (?) isn’t going to be a practical library that could export lottie for any sketch. Instead, you would need to create a p5.js sketch that worked like AfterEffects authoring – it would set timestamped states and interpolates between them, and those states (with their timecodes) would get written into the lottie JSON. However, thinking about it, I’m not sure when you would want to do this kind of authoring in p5.js instead of in AfterEffects directly…