1. Haiku Animation Tutorial
2. Haiku Animation Games

Expressions are snippets of code that add dynamic behavior to the properties within your animation. Every Haiku project you create can have its own collection of internal states. These pieces of data are special to your component as a method to “summon” them into your expression functions allowing you to create complex and dynamic behavior. Haiku Deck is the easiest way to create an amazing presentation on the web, iPad, or iPhone. Start a free trial today to see why millions have switched to Haiku Deck. Haiku Deck clears away the clutter, helping you focus on your key idea to unlock your creative flow. Professional design, without the.

Animator is a design tool for animated user interfaces — for real apps. Think of it as a design portal to your team's codebase. Use Animator to:

• Design imaginative UI components
• Snap them into existing codebases (Web, iOS, Android)
• Then keep iterating on them from your design tools, hand-in-hand with developers

Whether you live inside your design tools, your text editor, or both — Animator helps your team build your product, together.

Today, our team is thrilled to launch Animator for Mac, our motion design & UI-building tool, and to open-source Haiku Core, our renderer and design-as-code component format — both in public preview.

Demo time! From design to code and back again:

Why animation?

At its heart, Animator is a way to design and build apps. So why the motion design tooling? Because animation is table-stakes for modern apps. Animation is so ubiquitous today that to the consumer it's invisible until it's missing or abused. Yet as universal as animations are, the state-of-the-art for creating animations for software is no better than it was 25 years ago. That is: you have to code them.

Sure, there's no shortage of prototyping tools, for designers to communicate motion to developers, so they can then code the 'real thing.' Many tools will even generate code so you can give the developer a chunk of (normally difficult-to-use) code as a starting point — but make no mistake: none of today's design hand-off tools make it to the finish line. The moment a developer gets involved, e.g. to patch in live data or adapt to an existing project, the designer passes the baton and can no longer touch those pixels. Not without knowing how to write code.

This conundrum is no secret — many have concluded that the only way to prepare for the future as a UI designer is to learn how to code. At Haiku, we don't believe visual design tooling is going away, nor should the masters of those tools. Obviously code isn't going anywhere soon, either. So 18 months ago we set out to create a future where design and code are connected, where designers and developers can collaborate as easily on software as developers do with other developers.

And while the road ahead of us is still long, today we invite you to take Animator for a spin. While in preview, it's completely free. Even if Animator isn't a fit for your team — we firmly believe this approach is the future of designer-developer collaboration.

A foundation of design as code

The fundamental disconnect between design and code comes down simply to the different tools that we use. Though both designers and developers produce pixels on screens, they're 'different kinds' of pixels. Though both design tools and code tools store their data in files, they're different file formats. Though code has undergone monumental transformations over the last decades toward open standards, design tools are still locked away in walled gardens.

What if — a design tool were built from the ground-up on open standards? With an open file format and an open source renderer? (hint: this is Animator for Mac)

What if the design file format happened to be code? Like hackable, hand-editable code? Where design components were ready for codebases as code components? (hint: this is Haiku Core)

It turns out when your design is code, you can do a lot of crazy stuff. Like live-design your app from your design tool. And keep designing your product alongside developers, from concept to final iteration. Check out the video at the beginning of this blog post for more of what I mean (the juicy developer bits start at 3:47.)

What's today? What's next?

Today, you can create animated, interactive components inside Animator, then add them to any Web app. By exporting to Lottie, you can also create animations for iOS and Android apps. Animator lets designers track their work seamlessly with Git (powered by GitLab) and then delivers versioned design components to developers through yarn/npm via the Haiku CLI.

As for tomorrow, our backlog runneth over. Some features you won't find in Animator today, but that we're excited to add as soon as we can:

• Multi/nested components
• Layouts
• Baseline form controls (checkboxes, text boxes, etc.)
• Richer animation features, like path morphing and animated masks
• Drawing tools inside Animator, plus support for Illustrator, Photoshop, and more
• 'Teams,' our suite of deeper team collaboration features

And a note on pricing: while in Preview, Animator is entirely free to use. Our plan is to charge for team collaboration features, but otherwise to leave Animator for Mac (and of course, the open source Haiku Core) free to use. While this is subject to change as we refine our strategy, we're sharing this now as we believe in transparency, and we respect the time investment you make when checking out a new tool like Animator.

If you have any questions, or if your team would like to beta-test our Team features, please reach out!

We can't wait to see what you create.

DESIGNER PREVIEW Get Animator For Mac

Join us on:

You asked, we listened. Over the past few years, our team has received a steady stream of messages, tweets and emails, all asking for the same thing: for us to port Animator to Windows. After some time in the making, we’re happy to reveal that today we launch Haiku Animator for Windows!

The story behind Animator

The Haiku team started building Animator 4 years ago, launching the first version for MacOS in 2016. Over this time, a lot of designers, developers and incredible teams like Deloitte, Uber, Lego, Google, Daimler/Benz and TripAdvisor, to name a few, have adopted Animator as a simple, easy to use and affordable alternative to create engaging animations for any app or website in minutes.

Animator allows you to export or embed your animation however you choose, with options for Angular, Vue, React, Lottie, Video and GIF, and offers a suite of features designed to build interactive experiences.

A new world of collaboration

As some of you know, the Haiku team is a small and tight-knit group of multi-disciplinary creators, working hard to fulfill our ambitious dream: to unlock creativity in software by enabling designers and developers to create, together.

Even with our best efforts, we knew we were only catering to only a percentage of people and teams with Animator for MacOS. Today, we’re able to finally offer Animator to a lot more people making teamwork truly possible. Collaboration, can now include Windows users.

Connect with Figma

Windows users will be able to enjoy one of our most popular integrations, with world-renowned design tool, Figma. Figma helps teams create, test, and ship better designs from start to finish, and in association with Animator, it can be used to spark creativity and delight with interactive motion design.

Take your native app or website to the next level, engage and surprise your customers in no time. Animator was designed to be simple, and easy to learn. It doesn’t take a rocket scientist, just your imagination.

What else is new?

Haiku Animation Tutorial

This new release also includes:

• The ability drag and reposition the Bezier Editor.
• Support for <line> elements in Lottie export.
• The ability to delete a single tween by pressing ⌫ (delete) without deleting the related keyframes.

Fixes

• Fixed a crash when pressing Cmd + A while an element is being dragged.
• Fixed a crash when an invalid curve value is entered while the Curve Editor is open.
• Removed Control Flow > If and Control Flow > Repeat from the timeline ADD + menu.
• Renamed Translation to Position in the timeline ADD + menu.
• Removed a drag ghost image appearing while keyframes are dragged.
• Fixed a crash when the internet connection is lost on some scenarios.
• Added helpful warnings when trying to import complex design assets.
• Fixed a bug causing the Timeline to appear empty when the Main Row is collapsed.
• Fixed a bug causing to ask the user to install Sketch, even though it was already installed.
• Removed Code Editor

Continuing our journey

Haiku Animation Games

These past four years working to build our dreams have been an absolute ride. We want to take a moment to thank all of you who have supported us from day one. Thank you for trusting our mission and our team, we hope this release opens a new chapter in our company’s history. We look forward to seeing what you create. Tag us, message us, let us know what you think.

Connect with us