Use Actions to execute small snippets of JavaScript throughout your project. Actions are designed to be accessible to people who only know a little code, or who want to learn—as well as to engineers.

You can use Actions to:

  • Travel through time by changing the timeline position
  • Respond to user input
  • Work with real data
  • Change properties of elements
  • And more!

If you haven't already, check out Tutorial 2: Interactivity with Actions to see Actions in action.


Frame Actions are triggered every time a frame is crossed. To add a Frame Action, hover above the frame you wish to insert an Action to and click the (+) button.


To add an Event Action, Right click (or select the settings button next to) an element on the stage and select Edit Element Actions.


Inside an action, the this-binding of the listener function's scope is an instance of your component, which is represented as a HaikuComponent. You can read more about this in the Haiku Core section. Here is a quick example:

// click action
function (target, event) {
  var starX = this.querySelector('Star').getPositionX();
  if (starX > 100) {
      opacity: this.state.opacity - 0.1;

Next: Defining States

results matching ""

    No results matching ""