Keyframes

Keyframes

A keyframe is a value of a property at a specific point in time. Add keyframes to your layers to let ToonSquid automatically animate properties over time.

Many but not all layer properties support keyframes. All such properties have a keyframe on the first frame of the layer.

Layer with keyframes

Keyframing Mode#

Keyframe mode button

To start adding keyframes you need to switch the editor into keyframing mode. For this, tap the keyframing button in the timeline.

When the keyframing mode is enabled, the timeline shows layer properties and keyframes underneath the selected layer. You can configure the editor to also show keyframes in all layers in the timeline at once instead of just for the selected layer.

If an animation layer is selected, only the keyframes of the selected drawing layer inside the selected drawing are shown.

Keyframes are visualized in the timeline with a rhombus icon.

Automatic Keyframe Insertion#

By default, new keyframes are automatically inserted when a property is edited if either

  • the keyframing mode is enabled
  • the property already has more than 1 keyframe

    Automatic keyframe insertion can be disabled in the settings.

    Note#

    By default, the keyframing mode does not just show you the keyframes of a layer, but also changes the editing behavior regarding automatic keyframe insertion, so make sure that you don't keep this mode enabled unintentionally.

    Manual Keyframe Insertion#

    You can always manually add keyframes to a property using the following steps.

    1. Select one or more properties.
    2. Select the frame on which the keyframes should be added.
    3. Tap the Add Keyframe button at the bottom of the timeline.

    Delete Keyframes#

    Use the following steps to delete keyframes.

    1. Select one or more keyframes.
    2. Tap the Delete Keyframe button at the bottom of the timeline.

    Alternatively, select a keyframe in the timeline, tap it again and select the Delete action.

    The first keyframe of properties cannot be deleted.

    Copy and Paste#

    Keyframe actions

    All keyframes of a property can be copied using the Copy action. Paste the copied data on a different property to overwrite its existing keyframes.
    You can also copy a selection of keyframes using the Copy action on the keyframes.

    Pasting the selected keyframes maintains their relative distances between each other. Pasting a keyframe on an existing keyframe overwrites the existing values.

    Select Properties and Keyframes#

    Properties and keyframes can be selected by tapping them once. Selected properties and keyframes are highlighted in the timeline.

    Multiple properties can be selected just like layers by swiping them to the right and then letting go. Multiple keyframes can be selected similarly to drawings using a double tap and drag gesture.

    Move Keyframes#

    Keyframes can be moved using drag and drop, which also works for multiple selected keyframes at once. Similarly to when multiple keyframes are copied and pasted, dragging them also maintains their distance between each other (i.e. their timing).

    Keyframes cannot be dropped onto frames that already have other keyframes, and they cannot be dropped in other properties either.

    Property Visibility#

    By default, all keyframeable properties of a layer are shown in the timeline. You can hide the ones you don't want to see using the X button on the property.

    Note#

    It is important to remember that keyframes are still automatically added for hidden properties as well. If you find this behavior unexpected, you can disable it in the settings.

    Multidimensional Properties#

    Separates property dimensions

    Some properties (such as Position and Scale) are multidimensional, which means that they are in reality made up of two properties - one for the x-axis and one for the y-axis.

    Such multidimensional properties can be split into their separate dimensions using the Separate X and Y property action.

    They can then be collapsed again using the Collapse dimensions action, but this is only possible if both x and y properties have keyframes on all the same frames. When you edit a collapsed multidimensional property, your edits (e.g. regarding easing curves) are automatically applied to both of the underlying x and y properties.

    No search results