Any discrepancy between Animator & Lottie could be a limitation of Lottie support. In general, the limitations of the Lottie integration are documented here.
- 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.
- 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.
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
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.
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.
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.
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.
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.