Video
Create dynamic, cross-platform UIs using design tools, code, or both.
Design assets with Sketch, animate them with Haiku, and include them in any web app—then keep iterating.
Blog post
Learn the basics of motion design and get started with Haiku.
How to integrate and use Figma projects in Haiku.
Export Sketch Animations to native iOS & Android Code!
By: Maex
Help doc
How to bring assets designed in Sketch into Haiku and troubleshooting common issues.
How to bring assets designed in Figma into Haiku and troubleshooting common issues.
How to bring assets designed in Illustrator into Haiku and troubleshooting common issues.
What if I don't use Sketch / Figma / Illustrator?
Understand the terms and naming conventions used in the Haiku app.
Different ways to create a new Haiku project.
Forks are a unique copy of a project, which doesn't affect the original project.
When you create a Haiku project, you can decide if you want it to be public or private.
You can add keyframes to the timeline in three ways.
In the animation world, transitions are known as tweens.
How can I select an object in the canvas?
Maintain the original position of your slices with Ungroup.
How can I align elements in Haiku?
How can I change the order of my layers / slices / elements / shapes?
You have a couple of options to Zoom in and out of both the timeline and the stage.
How can I change the origin point for scaling or rotating an element?
A quick tutorial on how to change the point of rotation (origin) in Haiku.
How can I adjust the size of the stage in Haiku?
Can I switch from frames to milliseconds in the timeline?
How can I rotate my slice / element?
Work with different sized elements easier.
Can I change the stage's background color or an asset's color?
Steps to add the stroke property to an element.
A quick tutorial on using sub-components within Haiku.
Find the “playback” property on the timeline where you instantiated the component.
How to preview each component individually and all components together.
Learn how to create, edit, use and make the most out of States in Haiku.
How to use the built-in Code Editor or any custom editor.
Vertical curved path with flow effect.
Horizontal curved path with bounce effect.
Haiku Tour/walkthrough + Spinning the record.
By: Anjan Shrestha
Quick tutorial to animate a menu transition.
Using Haiku, you can fine-tune vector animations and then drop them into any web app with a line of code.
Can Haiku do motion blurs?
Learn how to path morph using Haiku.
Advanced follow-along tutorial on path morphing.
Blog post and Video
Understand the two different types of Actions available in Haiku, Frame and Element Actions.
Actions are small snippets of code (JavaScript) with a lot of power.
Learn how to add interactivity to your designs for the Web using Actions, States & Expressions in Haiku.
Using states and events to create the stop/play interactions of a media player.
Quick tutorial on how to make a simple toggle component using Haiku.
Export to React, after designing in Sketch, and tweaking keyframes in Haiku.
By: Kyle Gill
Using states and actions to create instances of an element depending on where the user clicks.
Learn how to use the send() api to communicate between components.
Bring your Figma designs to life by easily animating and publishing as React components.
Helpers allow you to define a function that can be later used in an Expression or an Action.
Summonables are a collection of built-in pieces of dynamic data that you can summon.
This will allow you to create pieces of UI that react to both touch and mouse interactions.
Docs
Embed a component in a web app, binding it with application logic.
Reference and technical documentation on Haiku for Mac and Haiku Core API's.
Advice and answers on common issues, frequently asked questions, and tips and tricks.
