Currently, there's no UI for this, but there's a way. You can edit the underlying code files in Animator.  Here's a simple video. The narrative is roughly:

  • See that the green circle is animated; I want to swap it for the red square.

  • I open the code file (~/.haiku/projects/YOUR_USERNAME/YOUR_PROJECT_NAME/code/main/code.js) and find the id  of the element that already has the animations.

  • Animator applies all properties/timelines to elements via id 's — very much like using CSS to apply properties by #element-id.  So to swap the element, you just need to give the new element the id  of the old element.

  • In this case, I opened the code, found the ID of the element I wanted to swap out, applied that ID to the element I wanted to receive the behavior, then deleted the original element from the template.  Go back to Animator, and see that the new element has the properties of the old one.

If you're comfortable with code, this is at least an 'escape hatch' until we provide the UI that does this for you.

Did this answer your question?