Animation Editor

The animation editor allows you to either create or modify animations for all supported platforms either by using pre-made template animations or creating custom ones.

The animation editor opens automatically when you create a new animation or when you click on existing ones from the component inspector panel (see Structure Inspectors). You can disable the animation editor either by clicking Exit animation in the top left corner of the design editor or by removing the animation altogether.

Animation Timeline

The animation timeline is at the heart of every operation you do with animations. The animation timeline allows you to play, replay, seek and debug your animations with ease. It consists of three main parts - a panel of animated components and properties on the left (1); a draggable, scrollable timeline that takes up the center space of the animation edtior (2); and a control strip at the top of the animation editor that gives you access to replay options (3).

If you just want to test the animations, you can also hide the timeline by clicking the small arrow on the left side of the timeline and bring it back again using the same control.

Differences from edit mode

Animations behave differently when in edit vs. preview mode. In edit mode, every component of the specific screen can be selected and then modified by changing its properties in the right panel - in preview mode, all components simulate their interactions - so if you've created an animation that plays after tapping a certain button, you can test that immediately.