Any discrepancy between Haiku & Lottie could be a limitation of Lottie support. In general, the limitations of the Lottie integration are documented here

Lottie + Haiku 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 Haiku 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.
  • Interactions, it only supports animations. We've been working with the Lottie team at Airbnb on this; they recently exposed an API for programmatically controlling animations, but we'd have to build our own cross-platform runtime a la React Native, but bolted onto Lottie as the rendering layer in order for JS-powered interactions to work on iOS and Android. For now, interactions are only supported on Web through Haiku Core. Many Lottie users have success handling elements like buttons by 1. controlling the Lottie timeline programmatically (e.g. telling it to stop at 0s), then 2. handling user events on its container, e.g. telling the Lottie timeline to advance when the user taps.

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.

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 Haiku 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 Haiku animation into the WebView) .We've had users report that embedding WKWebViews that render Haiku components perform very well in native iOS apps. You can pass data into the Haiku 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 Haiku.app 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 Haiku 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.

Did this answer your question?