Any ideas for using lottie json svg animations with phoenix

So here’s the thing, there is a fair bit of talk bubbling around svg inlining in Phoenix. A few of the Phoenix phrenzy project used them and added some animation etc.

Has anyone taken a look at getting elixir to parse lottie Json files to Phoenix. It’s easy enough to use the lottie web js libraries but as it’s just json I wondered if phoenix may be able to achieve the same type of json based svg player.

I have for the past few years used bodymovin to export animation from after effects which essentially creates a json file that is recreated as an svg by lottie player.

The complexity of animation and ability to trigger play loop goto frame etc makes it the only real choice for svg animation these days.

Cant see anyone mentioned it here, so anyone interested in working on a phoenix lottie implementation if none exist

Here are some examples of lottie animations and you can download the json files for them. They look fairly well structured and can see name meta name type etc as one letter keys just seems like there may be a way for phoenix liveview to work directly somehow

Example button
https://codepen.io/alexandredesign/pen/XzLQm

Bodymovin ae svg animation export jhttps://www.battleaxe.co/rh2-bodymovin/

Is there a JSON Schema for the format?

There must be to parse in js etc, Im going to take a look at that implementation to see what their doing

JSON Schema is somewhat new, so you’d be surprised how few projects use it to document their JSON structure, if they do, that’s great.

Ill check the docs of the ae exporter bodymovin, that may contain some schema data otherwise I may drop the makers of bodymovin an email I suppose.

But really, i cant see the benefit of pushing all of this over a websocket, unless you were trying to synchronize a bunch of clients. Even then, you’re better off using different techniques, and let all the rendering happen on the client side.

1 Like

Maybe… did say the js implementation is fine just wondering as this is essentially svg animation via json I was just pondering liveview for interactive svg animation as ae and lottie are amazing for more complex multi stage animation using event triggers.

It might be worth parsing on the Elixir side, in order to annotate elements and events for integration with LiveView, that could be interesting.

Ah ha a full set of json spec docs and a github repo for bodymovin https://github.com/chenqingspring/bodymovin/tree/master/docs/json
https://github.com/chenqingspring/bodymovin