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!
Introducing Haiku: Design and Create Motion (Code Optional)
Founder and Haiku creator Zack Brown set out to create Haiku after an extensivecareer in the digital creative industry where he witnessed firsthand how much time wasmisusedconverting visual designs into code. Haikuenables designers, engineers, marketers, managers and every other stakeholder to create together instead of forever being stuck in “hand off” mode.
Before we dive into Haiku in-depthlet’s gain a better idea, visually, of the kind ofend 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.
The “WildLoader” demo above is another example taken from the gallery page and is a project providedby Haiku. For this demo I’musing CodePen to showcase and yes, it’sall 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 incarnationHaiku doesn’thave 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 theCLI 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 editmanually. You can evenrun
haiku loginto log in interactively from the command line and respectivelyyou can also run
haiku logoutto log out. Soon you’ll be able to install the CLI directly from npm, using
npm install -g @haiku/cli.
When youinitially open up Haiku you’’ll get three different demo projects provided for learning purposes. The one I used titled “Moto” is a scene depicting amotorcyclist 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.
In the futureyou can expect to see otherfeatures like real-time collaborative editing, branching, sharing drafts, in-context commenting plus much more.
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 thateach element can be expanded or collapsed to drill into any property such as
scaleand 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 timelinecan contain more than just simple values. Users can integratesnippets of code calledexpressions. This is very much in fashion withMicrosoft Excel; begin your property input value with anequals signand 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 projectyou 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 yourexpression functionsallowing you to create complex and dynamic behavior. You can access a state value at any timevia the custom timeline expressions by typing the state’sname.
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
Using web technologies for publishingmeans a Haiku project that is publishedcan run anywhere your code does usingany modern browser. The Haiku team makes sure you don’t have to think about the player as theydo 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 handoff to a developer via a single link, Haiku handles the rest.
There are of coursemoments when you crave more control; control the timeline based on events, change the way your component is sized withinits container or any number ofprogrammatic actions. For these specialcases you can leverage theHaiku Player Developer API.
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 URLhttp://haiku.ai/sign-up?r=3G2gnwill be granted early access to Haiku. Enjoy!