Can p5.js output valid lottie-files?

p5.js Libraries
1

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

2

No idea…

I even don’t know what lottie can import

Maybe somebody else knows this

Sorry!

1 Like
3

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…

4

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.

5

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

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…

2 Likes