You can control individual assets within a group, however you cant control groups within a group. For example, if you want to control the Opacity property of the group "3 Message", you will only be able to control it at an object level in the group.


As a workaround, you can try to “Ungroup” the layer (Cmd+Shift+G), regroup it (Cmd+G), then target subgroups directly.

Another option is entering Code Mode via the toggle on the top, locating the group in the component spec, and modifying its properties by hand:

  • In code mode, you can Cmd+F search to find your group by name in the template. It will look like “haiku-title”: “3 Message”  or similar.
  • In that same attributes dictionary, you will see the haiku ID, e.g. "haiku-id": "Group-fd5851dfec1a0a37".
  • If you Cmd+F search for that ID prefixed by haiku:, e.g. haiku:Group-fd5851dfec1a0a37, you should find the property definitions.

When you have no animations on layout properties, the property definitions will either be missing entirely or in shorthand format, like "opacity": 1. The longhand format can be observed on other places where you’ve registered animations and will look something like:

opacity: {
  "0": { edited: true, value: 0 },
  "1000": { curve: "easeInOutQuad", edited: true, value: 0 },
  "2000": { edited: true, value: 1 }
}

After you make changes, Cmd+S to save and check your work.

The keys are timestamps in milliseconds. The edited property tells our system not to overwrite this property with canon when it merges changes from your design file sources. 

The list of supported curve names is here: https://github.com/HaikuTeam/core/tree/master/src/vendor/just-curves/curves. 

And the specification for available layout properties is here: https://github.com/HaikuTeam/core/blob/master/src/api/index.ts#L467-L478. 

You may want to play with layout animations in a simple playground project with items you can target in the timeline to gain a better understanding of the format.

Note: Most of the changes you make in Code Mode are unchecked, so it’s relatively easy to break your project by making a mistake here, and there is no undo after you save changes and switch back to Design Mode. If you’re not confident in playing around in Code Mode, probably best to wait for this feature to land.

Did this answer your question?