Saola Animate lets you create HTML5 animation with a powerful keyframe-based animation system. The simple yet efficient workflow only requires you to choose what you want to animate and perfect the timing of your animation. Thus, making animated HTML5 content turns out to be so quick and easy.
To create HTML5 animation, you most often work with the property and keyframe in the Properties and Timeline panes. For this reason, don’t miss out on this useful tutorial because it will help you understand the interface of the two panes and walk you through the steps to create HTML5 animation in Saola Animate.
This tutorial covers:
Keyframe and Property
Located on the right side of the application, the Properties pane displays properties of selected elements. It has many sections, and each section shows a group of properties with editable text fields, lists, and other controls to adjust properties. In order to create HTML5 animation, you usually refer to this pane to add necessary keyframes and adjust property values.
- Section title bar: Click a section title bar to expand or collapse a section.
- Property name: Name of a property.
- Add Keyframe button: Click to add a new keyframe at the Playhead position. This button indicates that a property can be animated. Properties without keyframe icon such as Overflow and Cursor are only editable.
- Property value: Value of a property.
- Value unit: Some properties have value unit, i.e. pixel (px) and percentage (%).
To change a property value, do either of the following:
- Enter a new value in the value box (6). You can also use the mouse wheel or the UP/DOWN ARROW keys to adjust the value.
- Select a value from the value drop-down list (7).
- Drag the handle on the slider (8). Or, use the mouse wheel or the LEFT/RIGHT ARROW keys to adjust the value.
Besides, it’s important to note that the Properties pane constantly updates itself depending on the selected element type. A number of properties are consistent and appear despite what type of elements you select. In contrast, other properties are specific to a certain type of elements. For example, the Media section is only available for audio and video elements.
For more details about the Properties pane, check out the video tutorial Saola Animate: Properties Pane Overview.
Timeline contains animation. Here, you can add keyframes, create HTML5 animation, and perfect the timing of the animation you’ve created.
- Playback controls (left to right): Go to Start, Play/Stop, Go to End, Loop Playback. The playback controls allow you to preview your animation within the editor.
- Easing button: Customize the easing method. Easing, also known as animation timing function, specifies the speed of the transition effect.
- Auto-Keyframe Mode button: Toggle the Auto-Keyframe Mode. In this mode, when you make any edit to elements, Saola Animate will automatically create necessary keyframes on the Timeline.
- Time control (current time indicator): Display the current time, in other words, the current position of the Playhead (5). Click on the Time control to make it editable. Then, use the mouse wheel or enter a new value to adjust the current time.
- Playhead: The orange Playhead and its red marker line moves as a document plays. It indicates both the current timestamp displayed on the Canvas and the current time in the Time control (4).
- Element name: Elements on the Canvas are all displayed on the Timeline.
- Property name: The Timeline shows names of all properties that are animated.
- Property value: The Timeline shows property value of a property at the Playhead position. Double-click it to make it editable, then you can change the property value.
- Add Keyframe button: Click the button to add a new keyframe at the Playhead position.
- Animation segment: An animation is composed of two keyframes defining its starting and ending values.
Above are some useful points to note about the Timeline pane when it comes to creating HTML5 animation. For more details about this pane, see How to Use the Timeline Pane.
Creating HTML5 Animation
Property animation is created by gradually changing from this value to that value. Keyframes play the role of the indicator to indicate the starting and ending values. So, to create HTML5 animation, you need to add two keyframes that define the starting and ending values of a property.
For more information about working with keyframes, see:
- Creating CSS3 Animation Keyframes Easily with Saola Animate
- Moving and Copying Animation Keyframes When Creating HTML5 Animation
Now, let’s get to know the steps to create HTML5 animation in Saola Animate.
Say, you have a DIV element on a scene. Let’s animate its Left property with the following steps:
Step 1: Select the Div_1 element (1).
Step 2: In the Timeline pane, place the Playhead where you want the animation to start. In this case, leave the Playhead at 0:00 (2), i.e. the beginning of the Timeline.
Step 3: In the Properties pane (3), open the Position & Size section (4). Click the Add Keyframe button (5) next to the Left property.
This creates the starting keyframe [Left, time: 0s, value: 20px] (6).
Step 4: In the Timeline pane, move the Playhead to where you want the animation to end. In this case, drag the Playhead to 0:03 (7).
Step 5: Click the Add Keyframe button (8) again to add another keyframe of the Left property.
Step 6: Change the value of the Left property from 20px to 200px (9).
This creates the ending keyframe [Left, time: 3s, value: 200px] (10). At the same time, a bar between the two keyframes appears, indicating the Left property animation (11).
Step 7: Click the Play button (12) or press SPACE BAR to preview animation within the editor. You can also click the Preview Current Scene in Browser (13) or Preview Project in Browser (14) to preview animation in default browser.
All in all, with seven steps above, you’ve gone through the first half of the journey to create HTML5 animation in Saola Animate. The second half of the journey is to adjust and fine-tune the animation you’ve made. For example, you can level up your HTML animation with a wide variety of CSS easing functions. So, stay tuned and feel free to contact us if you need any support.