In Saola Animate, keyframes play a key role in building HTML5 animation. This article explains the Auto Keyframe mode – an automatic keyframing feature allowing generating keyframes in a flash.
You’re a keyframe artist when animating with Saola Animate. All you have to do is tell Saola Animate where you want to start and finish your animation by inserting keyframes. Each keyframe marks a point of time and specifies a value for a property. Then, Saola Animate creates a smooth change of that property over time.
For more details about keyframes and HTML5 animation, see the articles below:
- Creating HTML5 Animation
- Creating CSS3 Animation Keyframes Easily
- Moving and Copying Animation Keyframes
- Leveling Up Your HTML5 Animation with CSS Easing Functions
So, what if you can create keyframes automatically when making HTML5 animation? You’ll save tons of time and effort for sure. In the following part, you’ll learn the Auto Keyframe mode and how to use it to speed up your work.
Automatic Keyframing with Auto Keyframe Mode
The Auto Keyframe mode allows automatically recording keyframes when building animation. Thus, it prevents you from manually adding keyframes. Simply enable the Auto Keyframe mode, move the Playhead, and make an edit. Saola Animate itself inserts keyframes for any changed properties.
In the Timeline pane, the Auto-Keyframe Mode button looks like a record button on a music player. When turned on, it changes into a red circle and records any changes you make as keyframes.
Let’s say you want an image to fade in a scene using automatic keyframing. Perform the following steps:
Step 1: Click the Auto-Keyframe Mode button to turn on automatic keyframing. You can press the K key to shorten your time.
Step 2: Select an image you want to animate.
Step 3: In the Properties pane, drag the Opacity slider to 0%. As an edit, this immediately records a keyframe at the Playhead position. A starting keyframe [Opacity, time: 0s, value: 0%] (1) appears at the zero second.
Step 4: Move the Playhead to the first second (the end of the animation).
Step 5: Change the Opacity value to 100%. Another keyframe [Opacity, time: 1s, value: 100%] (2) is automatically inserted. A bar between the two keyframes appears, indicating the Opacity property animation.
Step 6: Preview your animation. Click the Play button or press SPACE BAR to preview within the editor. Otherwise, click the Preview Scene or Preview Project button on the toolbar to preview in default browser.
Tip: In step 5, instead of using the Properties pane, you can change the Opacity value in the Timeline pane. Just double-click the Opacity value and enter a new value there. This will directly create a keyframe at the Playhead position.
Using automatic keyframing, there are two things you need to mind:
(1) When automatic keyframing are enabled, two cases happen:
- 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 only creates keyframes when you make changes to properties. Let’s consider the following scenario.
You drag and drop an image onto the Canvas and want it to move across a scene. So, you enable the Auto Keyframe mode and start animating. You move the Playhead to the third second, drag the image to another location, and get things done? No!
You have only one keyframe at the third second while it takes at least two keyframes, namely a starting and an ending keyframe, for an animation. That’s because you only make one edit at the third second. No keyframe appears at the zero second 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 HTML5 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.