(Last Updated: September 14, 2018)

Keyframes play a key role in building HTML5 animation. This tutorial explains the Auto-Keyframe mode – an automatic keyframing feature letting you generate keyframes in a flash.

You’re a keyframe artist when animating with Saola Animate. You insert keyframes to tell Saola Animate where you want to start and finish your animation. Each keyframe marks a point of time and specifies a property value. Then, Saola Animate creates a smooth change of that property over time. But Saola Animate offers more than that with the Auto-Keyframe mode. This mode enables you to generate keyframes automatically, thus speeding up your work.

An animation segment contains two keyframes.

For more details about keyframes and HTML5 animation, see the tutorials below:

Automatic Keyframing with Auto-Keyframe Mode

The Auto-Keyframe mode allows automatically recording keyframes when building animation. Simply enable the Auto-Keyframe mode, move the Playhead, and make an edit. Saola Animate itself will insert keyframes for any changed properties.

In the Timeline pane, press the K key or click the Auto-Keyframe Mode button to turn the mode on. From now on, Saola Animate will record any property changes as keyframes.

Click the button to turn the Auto-Keyframe mode on.

Suppose you want an image to fade in a scene using automatic keyframing. Select the image and perform the following steps:

Step 1: Press K or click the Auto-Keyframe Mode button to turn on automatic keyframing.

Step 2: In the Properties pane, drag the Opacity slider to 0% to make the image invisible. This immediately records a keyframe [Opacity, time: 0s, value: 0%] (1) at the Playhead position.

It's quick and easy to do automatic keyframing.

Step 3: Move the Playhead to the 0:00:01 seconds (the end of the animation).

Step 4: In the Timeline pane, double-click the Opacity value and change the value to 100% (2). Another keyframe [Opacity, time: 1s, value: 100%] (3) is automatically inserted. A bar between the two keyframes appears, indicating the Opacity property animation.

It's quick and easy to do automatic keyframing.

Step 5: Preview animation.

Take note of the following:

(1) When automatic keyframing is enabled, either of the cases happens:

  • If there is no keyframe at the current time, Saola Animate will create a new keyframe for the property that you change.
  • If there exists a keyframe for a property at the current time and that property is modified, its value will be updated to the current value.

(2) Automatic keyframing creates keyframes only when you make changes to properties. Consider the following scenario.

You insert an image onto the Canvas and want it to move across a scene. You turn the Auto-Keyframe mode on and move the Playhead to 0:00:03 seconds. Then, drag the image to another location, thinking this will create an animation segment. In fact, it won’t because you make only one edit at 0:00:03 seconds and create only one keyframe – not enough for an animation. No keyframe is added at 0:00:00 seconds to specify the starting position of the image.

So, always remember to create a keyframe at the beginning of the animation. As in the scenario above, the initial position of the image is perfect and you have nothing to change. But you must explicitly insert a keyframe for that position.

It’s a breeze to create animation using the Auto-Keyframe mode. Why don’t you try this feature right now? Download Saola Animate, create a document, import resources, and explore your infinite possibilities.