Animator is a motion design app for creating production-ready animations and UI components. 

We're focused on: 

  1. Design expressiveness (e.g. the timeline, plus the ability to respond to user input and live data) and 

  2. Connected workflows with developers. 

We think being able to create live, usable animations and UI components trumps being able to just make pictures of them. We think developer hand off is a huge problem, not a feature. That is what sets us apart from other design tools. Some of them let you prototype using their screen interactions, others are great for making videos or Hollywood special effects, but it’s ultimately still a mockup that can’t be integrated with your codebase— a developer still has to re-create any designers work by hand.

The most fundamental difference between Animator and those tools is that they’re built around the ‘hand off’ paradigm. With those you’re handing off specs, interactive mockups or generated code to a developer who then integrates it with your codebase. Some of those tools even advertise hand off as a feature, but we think it’s actually part of the problem.

With Animator:

  • Everything is production ready, so you don’t waste time creating throwaway prototypes, as a designer you can author the actual animations and UI components that’ll be used by your website or app.

  • It’s always-integrated, so you can iterate on your designs even after they’ve been integrated with a codebase.

The best example of that is here. There’s an animation authored in Animator, embedded in a web app, and iOS & Android emulators, and you can see even changes made in the Sketch source file being pushed all the way through to the embedded animation in the apps. Unlimited iteration, without needing to constantly ‘hand off’ to a developer or, without a developer needing to re-create your work. 

It really comes down to how closely you want to collaborate:  if a designer is comfortable with "this is my silo; I will hand off this video [or export it to Lottie] and the rest is up to the developer" then Animator probably isn't for them.

If a designer is interested in collaborating with the developer to build the animation or UI together, this is what Animator is all about.  Every action in Animator is backed by a line of code.  Every visual change is automatically handled with a git commit.  When the designer pushes publish, they're doing a git push, and their work is published to npm (these are all literal, not figurative).  Importantly, once the designer's work is part of the UI, they can keep on changing it, iterating, experimenting — because it's connected to the developer through code & version control.

That's why Animator doesn't export measurements and styles, it doesn't “generate code” that you can never touch, and it doesn't lock up your motion design inside arcane object files. At Haiku, we like to say that our design format is code. The format happens to be open source. And although it may not feel like it, every time you edit a project in Animator, you're really editing code. But instead of literally typing instructions into a text file, you're doing so by dragging elements, tweaking numbers with your arrow keys, and pressing 'Play' instead of using the command line.

Did this answer your question?