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.
  • 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.

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.

Did this answer your question?