www 101

All you need to know about the internet

Have a Question?

If you have any question you can ask below or enter what you are looking for!

Introducing Haiku: Design and Create Motion (Code Optional)

With motion on the rise amongst web developers so too are the tools that help to streamline its creation. Haiku is a stand-alone application available to Mac users and also available as an in-browser option. By its own description “Design imaginative UI components that snap into any web app. Code optional.” In this article we’ll look over this new tooling available to motion lovers of all kinds; let’s dive in and explore all that is Haiku!

Haiku’s Inception

Founder and Haiku creator Zack Brown set out to create Haiku after an extensive career in the digital creative industry where he witnessed firsthand how much time was misused converting visual designs into code. Haiku enables designers, engineers, marketers, managers and every other stakeholder to create together instead of forever being stuck in “hand off” mode.

The Overview

Before we dive into Haiku in-depth let’s gain a better idea, visually, of the kind of end result you can expect.

This demo showcases intricate motions with regards to typography. It’s very reminiscent of other library effects you might have seen before, such as those created with Mo.js.

Haiku is built entirely using web technologies such as JavaScript, TypeScript, WebSockets, SVG, DOM internals, React and Git to track Haiku’s progress. Future goals are to allow the use of your own Git infrastructure instead of Haiku’s; git hosting is just one of the workflow services offered.

The “WildLoader” demo above is another example taken from the gallery page and is a project provided by Haiku. For this demo I’m using CodePen to showcase and yes, it’s all SVG.

With Haiku you’ll have the power to:

  • Bring any Sketch design to life.
  • Add interactivity by responding to user events and data.
  • Publish your creation as a clean, web-ready component.
  • Embed your component with just a few lines of code.

Sketch + Haiku

To get the most out of Haiku, you’ll need Sketch installed. In its current incarnation Haiku doesn’t have any of its own drawing tools and supports rich integration with Sketch for this very reason. There are future plans to support other drawing tools like Adobe Photoshop and Illustrator and eventually have some of its own as well.

Behind the scenes, Haiku converts all your Sketch design’s art boards, pages, and slices into individual assets that may be independently composed and animated on stage. You might ask yourself “What if you need to make a change to the Sketch file?” That’s fine! Haiku takes care of bringing your new changes into Haiku and onto any assets you’ve placed on the stage.

Haiku + CLI

The CLI (Command Line Interface) is an optional part of Haiku, but it opens up a lot of powerful features; for example, using the CLI to import a Haiku project into an existing codebase, or you can use the CLI to directly clone a Haiku project to your computer and access your code in order to edit manually. You can even run haiku login to log in interactively from the command line and respectively you can also run haiku logout to log out. Soon you’ll be able to install the CLI directly from npm, using npm install -g @haiku/cli.

Hello Haiku

When you initially open up Haiku you’’ll get three different demo projects provided for learning purposes. The one I used titled “Moto” is a scene depicting a motorcyclist riding along a backdrop of mountains while the elements pass by the rider in true life-like fashion.

The application’s interface contains a visual timeline for each element or keyframe for the scene. You can interact with this visual timeline in order to fine-tune your animations and gain a visual result of the changes.

Every component you make in Haiku is automatically optimized for production; it’s not a prototyping tool. Haiku believes creative teams should spend less time making throwaway prototypes and more time shipping. Under the hood, every Haiku component is clean JavaScript code that you can always hand-edit without breaking the link to the source design. Gone are the days of reworking your handcrafted code as fresh design changes come in. Haiku even provides a powerful API for wiring up your components to external business logic.

In the future you can expect to see other features like real-time collaborative editing, branching, sharing drafts, in-context commenting plus much more.

The Timeline

The visual timeline is a very central part of the product and, from my experience using it, is really well done. I find it extremely powerful that each element can be expanded or collapsed to drill into any property such as rotation, position or scale and each of these properties can be animated separately with keyframes and tweens for every element. Combine all that with the option to choose different easing curves for each tween and all wrapped in an intuitive and polished UX. So much awesome!

Property inputs within the timeline can contain more than just simple values. Users can integrate snippets of code called expressions. This is very much in fashion with Microsoft Excel; begin your property input value with an equals sign and the input will recognize that you’re typing an expression. 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. You can access a state value at any time via the custom timeline expressions by typing the state’s name.

States are how you work with mock data in Haiku. For example, if you wanted to create a data visualization where a series of points are animated based on an array of data. Using states and expressions you can visually set up your animations and then test them with mock data inside Haiku. When you’re ready to snap your project into a codebase these “mock states” are ready to accept real data.

If you’re using Haiku’s optional React adapter, every State in Haiku is automatically addressable as a React property. Wire up your data from React into the Haiku component and voila! Your designs are living inside your app complete with live data.

Publishing Haiku Projects

When you’re finally ready to ship a Haiku project you can publish using the Haiku Player. This player isn’t a browser plugin, it’s more a bundle of JavaScript that is included with your Haiku project allowing it to render on the web using the native technologies of HTML, CSS and JS.

Using web technologies for publishing means a Haiku project that is published can run anywhere your code does using any modern browser. The Haiku team makes sure you don’t have to think about the player as they do the heavy lifting and provide the code snippets to include your Haiku for codebases of different kinds.

Publishing your project is a click of a button on the top-right of the app. Behind the scenes, Haiku performs some heavy lifting, pushing to git servers and publishing the project to npm so it’s ready for a developer to install, drop the component into their code, and keep running.  Unlike code generators (since Haiku makes use of components) you get to keep iterating on your design even after it’s part of a codebase!  All that remains is to hand off to a developer via a single link, Haiku handles the rest.

There are of course moments when you crave more control; control the timeline based on events, change the way your component is sized within its container or any number of programmatic actions. For these special cases you can leverage the Haiku Player Developer API.

Conclusion

Like what you see? Think this would be a valuable addition to your workflow? Let us know in the comments what you think and where you could see yourself using this wonderful tool to help build your animation desires. Happy coding!

Special Gift for Tuts+ Readers 

The first 100 readers to request an invite at this URL http://haiku.ai/sign-up?r=3G2gn will be granted early access to Haiku. Enjoy!