animator
animator copied to clipboard
HaikuTeam
lottie export
when try to see the lottie preview... dont show anything... video and animated gift work great.
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?
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:
- https://github.com/HaikuTeam/animator/blob/master/packages/haiku-serialization/src/bll/Sketch.js
- https://github.com/HaikuTeam/animator/blob/master/packages/haiku-serialization/src/bll/Illustrator.js
- https://github.com/HaikuTeam/animator/blob/master/packages/haiku-serialization/src/bll/Figma.js
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)
Known issues
Any discrepancy between Animator & Lottie could be a limitation of Lottie support. In general, the limitations of the Lottie integration are documented here.
Lottie + Animator doesn't support
3D rotation. You could try using negative scale.x and scale.y to fake the rotation — which would be supported in Lottie, or removing 3D transforms from your Animator project, e.g. any Rotation Y, Rotation X, or Translation Z properties.
Drop shadows on iOS or Android.
Masking.
Subcomponent timeline control. As implemented, subcomponents play once.
Dynamic expressions — flat JSON Lottie format only supports static and doesn’t have helpers/summonables.
Using PNG or JPG on your Design tool file
CSS stroke dash-array
Interactions, it only supports animations. Lottie has no way to support Actions or Expressions from Haiku Animator, and Lottie also doesn't offer a consistent cross-platform API for controlling playback. Some Lottie users have hacked into it and found ways to control the Lottie playhead with swift/objective C/java/Kotlin, which you can also do with Haiku Animator Lottie exports. If you want to use the Actions you author inside Haiku Animator on iOS or Android, the best option is to use Animator Core and embed your projects in webviews.
Testing
Once you've created your animation, please export to Lottie and test the obtained Lottie JSON at https://lottiefiles.com/preview
When a Lottie export doesn't work, but there is an exported blob of JSON — it's almost certainly a Lottie version issue. The Lottie runtime has introduced several breaking changes across versions, without any clear notification or documentation of these changes. This is further complicated by inconsistent adherence to versions across Lottie's iOS/Android/Web players. For a fix, I would recommend trying an older version of Lottie, closer to the versions listed in this section of our Lottie docs: https://docs.haikuforteams.com/embedding-and-using-haiku/lottie.html#limitations
More information
Will Lottie support dynamic features soon?
We don't expect Lottie to become a full application runtime. They are pretty intent on staying the course as an After-Effects-to-Animation solution. We agree that full cross-platform native runtimes, including interactions, would be awesome. As you might imagine, it's also a lot of work.
In the meantime, Haiku Core is the Web library that works as a full UI runtime, including support for user interactions & executing code. Core is also the exact renderer used inside Animator itself, so what you see is precisely what you get. By exporting to Lottie, we essentially have to remove the interactive/code pieces.
Native mobile interactivity is coming, but in the future. In the meantime, you could try using a WKWebView in iOS (simple HTMLString to embed the animation into the WebView) .We've had users report that embedding WKWebViews that render Animator components perform very well in native iOS apps. You can pass data into the Animator component from Swift/Objc via postMessage.
Older versions
It's not currently possible to export the animations to a .json that's compliant with older Lottie versions.
Theoretically a more modern lottie.json exported by Animator should be compliant (and backwards compatible) with a previous version of Lottie, but if it doesn't work that's about the end of the line. Lottie is so generous with breaking changes that tracking each of their versions separately is out of reach for our small team. We recommend upgrading Lottie inside your project if that's an option.
Tips
Sizing
The “Size X” and “Size Y” you set on the Main component (you can address these directly using the timeline via Stage sizing) are written out as the “composition dimensions” of the Lottie file (the Lottie adapters for Android and iOS have their own sizing conventions). So, the artboard size you set in Animator on the main component becomes the “pixel dimensions” of the Lottie animation file.
Closing paths
For Lottie to render your designs correctly, you need to \"Close paths\" in Sketch.
If you run into any additional issues you can contact us with the share.haiku.ai URL we can look into that project with more specificity.
Strokes
In your design tool (Sketch/Figma/AI) — convert that stroke to a fill. It's possible the Lottie export will then work as expected. If that doesn't work, you could also try converting the stroke to a raster image. There are certain vector artifacts/elements that Lottie won't render, so these work-arounds may get you there.
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?