Json exports for Lottie

I just discovered Lottie while looking at a SwiftUI tutorial,

I remembered that in a post @Jonathan you mention

in this thread


After following the simple setup in the YouTube vid above.

I must admit if we could export Animations from hype as compatible .json for Lottie then wow.

Can we have this as an official request

( GitHub - airbnb/lottie-ios: An iOS library to natively render After Effects vector animations )

5 Likes

Thanks for the request!

3 Likes

+1 for this request. Webflow just announced they will integrate lottie files for interactions and it would be great to use Hype for creating the assets.

4 Likes

Lottie export for Hype. O-MY-GOOD. Need it now, together with Webflow…

8 Likes

+1 for Webflow too. Now Webflow is fully supporting Lottie, this would be a FANTASTIC addition to Hype’s export. I’d poop my pants with happiness.

2 Likes

Just use BodyMovin and your good to go.

2 Likes

Lol. I actually read that as pop the first time round.

???

Well, Bodymovin and Lottie are for animation only. The are specialized and based around the expression engine from After Effects. Don't want to burst this bubble but I am not seeing any deep overlap with Hype. This would mean a complete exporter rewrite with a limited subset of features. I am very doubtful that will happen anytime soon… therefor:

Just use BodyMovin (free plugin for After Effects) to export After Effects compositions as Lottie animations (formerly also called BodyMovin). And your good to go… That's what it's meant for.

Thanks, had no clue to what your were refering to in regards to BodyMovin.

Not evryone has this...

I am sure Hype already uses json in the export at some point so my thinking is it may not be too much of a stretch... You may be right though but there is no harm asking.

3 Likes

Sorry, what I meant is I don’t have After Effects and was hoping to use Hype instead. As I understand it (and I really have no idea what I’m talking about here) Hype already exports some kind of JSON as part of the exported code (told you I have no idea what I’m on about). I was hoping for a simple export option that I could then import into Lottie.

2 Likes

I don’t have experience with these applications, but I’ve read that SVGator, Keyshape, and Haiku can all export lottie file. If you are creating animations for interactions, After Effects seems like overkill. It would be nice to use Hype for this.

As detailed above… It is pretty much tied to the expression engine. As long as you support that in your exports you can in theory create Lottie files. But about your examples I can't find any references that SVGator actually does, would be interesting if they did. Keyshape has a plugin on Github (possible for the SVG subset) and Haiku is pretty similar to Lottie. Not saying that it's impossible, but you'd have to get creative for many HTML and JS portions in Hype (hence subset, approximation) given that Lottie renders to HTML, SVG and CANVAS.

Hope this helps.

It is true that the Hype app’s animation interface is built upon the capabilities of the Hype javascript runtime, and therefore exporting with a different format could be lossy, even if using a subset of features.

However, Lottie is a really popular request and is definitely a feature we are not nixing!

There are other lossy export formats we already have (gif, video) and other potential ones like a pure CSS Animation export that could be really useful too.

3 Likes

Hi Jonathan,

Webflow has this integration with Lottie. It also restricts custom code to 10000 characters meaning Hype can’t be used even with the official cdn unless hosting elsewhere. I really don’t want to use Adobe products and Hype is way more loveable than other lottie exporting options at present.

1 Like

This would be a very nice addition, especially if you could export the animation of a single item to CSS as well as the full sequence.

2 Likes

+1 for Request, many clients ask me for delivering animations in JSON format and would be great to work directly with Hype and use Adobe as less as possible.

2 Likes

An “Lottie”-export-option really would be great!

Best

2 Likes

Any updates on lottie export option?

We have nothing to announce at this time. Thanks!

I am a 3d/AE animator. HTML 5 and JSON is EXPLODING on the scene!

I am using Bodymovin in AE, but here is the problem. it converts all art assets other then Shape Layers to PNGs. That blows up the size of the files. So I have been using Illustrator to ImageTrace my frames into VECTOR SVGs. BUT After Effects doesn't READ SVGs. I have been using HYPE to do a 'frame-flip'. Now i cant export JSON file...only HTML5...that uses the FRAMEs not keeping the VECTORS embed like in JSON.

So in this case I might as well just do all my animation in After Effects with PNGs. Forcing me to have a 4-5mb JSON vs the 1.2mb that all my vector art adds up to.

Hype is in a GREAT position to solve this. Hype can be the ONLY program out there that would actually have a competitive advantage over After Effects.

1 Like