Open alextapia007 opened 3 years ago
What operating system and operating system version are you running?
Is this happening when you press to the "LOTTIE" button in the bottom right corner, or when you use "Project" --> "Export" --> "Lottie"?
Are the Haiku Animator features known to not be supported by Lottie (you can check here or here)?
Could you post the code for the Haiku Animator project so we can troubleshoot line by line?
Hi. mac OS when i use "Project" --> "Export" --> "Lottie"
I'm currently experiencing the same issue, when I export to Lottie format it only creates an empty json file:
{}
Exporting as GIF or Video works fine.
In my particular case problem was in strokeDasharray format. For value delimited by spaces exported lottie looked empty. Comma delimited works fine.
Ex.: strokeDasharray: "120 50 70 100" -> empty lottie animation; strokeDasharray: "120, 50, 70, 100" -> OK.
I'm currently experiencing the same issue, when I export to Lottie format it only creates an empty json file:
{}
Exporting as GIF or Video works fine.
hi bro, do you solve this issue?
I'm currently experiencing the same issue, when I export to Lottie format it only creates an empty json file:
{}
Exporting as GIF or Video works fine.
hi bro, do you solve this issue?
No yet 😅
@unnfajar
hi bro, do you solve this issue?
No, I could not wait for this issue to be resolve so we ended up using Adobe After Effects with bodymovin. Worked flawlessly
I'm currently experiencing the same issue, when I export to Lottie format it only creates an empty json file:
Same here in my current project (export file includes {}
only). Although I was able to export a lottie file before. Unfortunately I don't have the source of it anymore. :/
Same Problem Here. when i'm trying to export to Lottie format it only creates an empty json file Anybody got a solution? :(
The console display:
2021-11-25T16:11:48.587Z|master |error|[formats]; caught exception during bodymovin export: Error: Unsupported curve type: arc!
Indeed. The Haiku SVG importer is very limited. And it does not match, in features, the bodymovin exporter. In my case, my SVG had arcs in its path and this failed to be saved. So, if you are working with SVG, you need to open them in Inkscape, select every path and then click "Extensions / Modify path / Flatten bezier curve". I've chosen 0.1 but you can select whatever you want. Then Haiku does not support path transform in its Lottie output, so you also need to remove them ("Extensions / Modify path / To Absolute"). Finally, Haiku does not support svg with namespace Inkscape is producing so you need to save as "optimized svg" mode in Inkscape so all the craft is gone. Beware that you'll loose all the great editing feature of your SVG file, so name the output file differently. It's perfectly fine for Haiku. Haiku also fails to export correct lottie file if the SVG has both a width & height and a view box, so you'd be better to remove the width & height attribute of the main SVG node. With all of these, it works and it works well.
Just need to prepare your assets carefully.
When you get {}
from a Lottie export, it's because a.) you're using a feature (like stroke dash-array) that's not supported by Lottie itself, b.) your design assets are formatted in a way that Lottie doesn't support (e.g. non-closed paths from Sketch) , c.) you're trying to use a Lottie runtime version that has introduced a broken change since the Animator exporter was written, or d.) you're using a feature that's supported by Lottie but not supported by Animator's exporter.
To solve: try removing features from your animations and exporting again; try simplifying or rasterizing assets from design tools and exporting again. More troubleshooting ideas below.
@X-Ryl669 regarding Inkscape, the manual steps you're describing to normalize SVG for Animator are very similar to those that had to be done for Sketch, Illustrator, and Figma. If you (or anyone else) is interested in automating those steps and creating an Inkscape importer, you could start by looking at these files:
Back to Lottie, copying+pasting more info from the old commercial help docs (see https://github.com/HaikuTeam/animator/blob/master/articles/page-6.json#L154)
<h1 id=\"known-issues\" class=\"intercom-align-left\">Known issues<p class=\"intercom-align-left\">Any discrepancy between Animator & Lottie could be a limitation of Lottie support. In general, the limitations of the Lottie integration are <a href=\"https://docs.haiku.ai/embedding-and-using-haiku/lottie.html\" target=\"_blank\">documented here.
<h2 id=\"lottie--animator-doesnt-support\" class=\"intercom-align-left\"><a href=\"https://airbnb.io/lottie/#/supported-features\" target=\"_blank\">Lottie + Animator doesn't supportWKWebView
s that render Animator components perform very well in native iOS apps. You can pass data into the Animator component from Swift/Objc via postMessage.Main
component (you can address these directly using the timeline via <a href=\"https://help.haiku.ai/troubleshooting-and-help/stage-sizing\" target=\"_blank\">Stage sizing) are written out as the “composition dimensions” of the Lottie file (the Lottie adapters for Android and iOS have their own <a href=\"http://airbnb.io/lottie/android/android.html#animation-size-px-vs-dp\" target=\"_blank\">sizing conventions). So, the artboard size you set in Animator on the main component becomes the “pixel dimensions” of the Lottie animation file. <div class=\"intercom-container intercom-align-left\"><img src=\"https://downloads.intercomcdn.com/i/o/78266157/293d85d240cbb1f7e500f0d2/Image+2018-09-23+at+9.52.01+PM.png\">I gave up fixing the SVG to whatever Haiku is able to use, so I'm using Glaxnimate. It works flawlessly, the output lottie file are way smaller and cleaner. Sure, the interface is a bit like Inkscape with many properties exposed as widget instead of nice GUI slider, but who cares if it works?
when try to see the lottie preview... dont show anything... video and animated gift work great.