Ova Motion
Sign inOpen editor
FeaturesRuntimesDownloadDocsSupportSign in
Start · Your first animation
Docs / Start

Your first animation

In five minutes you will draw a button, make it grow when the pointer is over it, and play it in a web page.

Draw

  1. Open app.ovamotion.com and choose New project on the Home screen.
  2. Pick the rectangle tool with R and drag on the artboard. Set its corner radius in the inspector on the right.
  3. Press T, click on the rectangle and type Play. Press Esc when you are done.

Animate

Press 2 (or pick Animate at the top). In the Animations list add one called hover. Move the playhead, select the rectangle and change its scale: a key appears on the timeline. K keys the selected property where the playhead is.

Keys are diamonds. Pick how the motion eases between two keys with F6 Hold, F7 Linear, F8 Ease in-out or F10 Elastic, or in the interpolation panel.

Make it react

Press 3 for Logic. In the State Machine panel add a machine, add a state for hover, and a Bool input called over. Connect the states with transitions that check over, then add a pointer listener on the button: Enter sets over to true, Exit sets it to false. Press Run to try it.

Ship it

Choose Export at the top right for an .egg file (or a web page with the player inside), or bake it from the command line:

Terminalegg
egg bake button.eggproj -o button.egg

Then play it with a runtime.