Skip to main content
Version: ver. 1.4.2

Animation Panel

You can create and manage custom animations in the Animation Panel. You can add several animation properties to each animation so as to make complex animations.

Add new animation​

Before creating a new animation, you should select a name to it. Then it will be added to the Manage animation list by clicking on the Add animation button.

Manage animation​

You can edit the selected animation in this section. You can create, edit or delete animation properties here.

Animation name​

In this section you can rename the selected animation.

Select animation​

You can choose an animation of yours from a drop-down menu. You can start the selected animation by clicking on the Play button on the prefered widget from the Default list. The animation can be deleted by clicking on the Bin button. In this case, it will be removed from all widgets it have been added to.

Default object​

Here, you can select the widget on which you would like to test the current animation.

Add property​

Properties are attributions of animations. However, not each and every property can be used in all widgets.

  • Position X - Shifting on the X axis.
  • Position Y - Shifting on the Y axis.
  • Width - Setting the width of the widget.
  • Height - Setting the height of the widget.
  • Opacity - Setting the opacity of the widget. This will change the parent opacity of the widget. In this case, child opacity will change, as well.
  • Image angle - Rotating the image widget by any angle.
  • Image zoom - Zooming in or out the image widget.
  • Image frame animation - Can be used to show images after each other. The name of the images should start with the same file name but should end with a number indicating the index of the image in the sequence. SquareLine automatically recognizes these image sequences and they can be animated like any other property. The Start and End value tells from where to which image to play the animation.

Property parameters​

Every animation has four parameters: start and end values, motion time and delay. Here, you can also set the characteristics of the animation.

  • Start Value - Start value of the animation.
  • End Value - End value of the animation.
  • Relative checkbox - If checked Start and End value will be interpreted relative to the current value
  • Delay - Delay time of the animation (milliseconds).
  • Time - Motion time of the animation (milliseconds).
  • Instant checkbox - If unchecked the Start value will be applied only after "Delay".
  • Playback delay - Delay before playing back the animation (milliseconds).
  • Playback time - Time of animation playback (0 to disable playback).
  • Loop delay - Delay before restarting the animation (milliseconds).
  • Loop count - Repeat the animation this number of times.
  • Infinite checkbox - Repeat the animation infinitely.
  • Animation types - In properties you can choose from 5 animation characteristics.