(Last Updated: March 5, 2018)

In Saola Animate, the Timeline pane is the most prominent part which presents a time-based view of animation. It is also the place where you devote most of your time to building HTML5 animation. Thus, mastering the Timeline pane is the key to animate your creativity.

Today’s tutorial will provide details about some timeline basics and controls. Specifically, you’ll learn the techniques for navigating, snapping, and zooming in the Timeline pane. You’ll also grasp how to use certain timeline controls to ease your HTML5 animation-making process.

This tutorial covers:

  1. Navigating the Timeline
  2. Snapping in the Timeline
  3. Zooming In and Out of the Timeline
  4. Managing Your View in the Timeline Pane
  5. Showing, Hiding, and Locking Elements

The Timeline pane displays where animation occurs. Knowing how to navigate the Timeline is crucial to create and fine-tune HTML5 animation. For example, you’re looking for the points of time where you want your animation to start and end, or a perfect time to place a timeline trigger.

navigate in the timeline

Saola Animate offers many controls to navigate the Timeline by moving the Playhead. Do one or more of the following:

  • Drag the Playhead to the desired location.
  • Click the timeline ruler at the time where you want to move the Playhead. That way, the Playhead will immediately jump to that location.
  • Change the time value in the time control, aka the current time indicator. Just click on the time control to make it editable, then scroll the mouse wheel or enter a new value.
  • Use the Playback buttons or shortcuts to preview your animation. More specifically, click the Play/Stop button or press SPACE BAR to start or stop animation in real time. Click the Go to Start button or press HOME to jump to the start of the Timeline. And click the Go to End button or press END to jump to the end of the animation. Also, click the Loop Playback button to play the animation in a loop.

Additionally, to aid you in navigating, the Timeline pane comes equipped with two useful controls: snapping and zooming. The following parts discuss each of them in turn.

Snapping in the Timeline

Dragging the Playhead along the Timeline, you may notice some snapping actions. For example, the Playhead jumps to a keyframe, a trigger, or a particular tick mark on the timeline ruler.

Timeline snapping lets you move the Playhead and timeline items, i.e. keyframes, labels, triggers as you wish. It helps out not only when you add keyframes or timeline triggers but also when you edit and fine-tune HTML5 animation. With snapping on, you can easily line up keyframes and animation segments in the Timeline.

timeline snapping

Timeline snapping is turned on by default with three modes: Grid, Playhead, and Keyframes, Labels, Triggers.

  • Snap to Grid: The Playhead and timeline items snap to the grid lines. Grid lines give precise measurements of the Timeline by displaying subtle vertical lines at regular intervals. They only appear when you click the Show Grid button.
  • Snap to Playhead: Timeline items snap to the Playhead.
  • Snap to Keyframes, Labels, Triggers: The Playhead and timeline items snap to the position of timeline items.

Note: When you enable Timeline snapping without any modes, the Playhead and timeline items will only snap to special tick marks on the timeline ruler. These tick marks appear depending on the zoom level of the Timeline.

Zooming In and Out of the Timeline

As your animation can be fairly long, you may not be able to see all animation segments in the Timeline. In that case, use the Timeline zoom controls to zoom the Timeline in and out to get better view of the animation.

The Timeline zoom controls appear as below:

zoom the timeline

  • Zoom slider: Drag the slider to the right, toward the + button to zoom in. Or, click the + button multiple times to zoom in to the level you want. Conversely, drag the slider to the left or click the button to zoom out.
  • Zoom to Fit: Click the button to fit the existing animation to the Timeline view.

Additionally, you can use the mouse wheel to zoom the Timeline. Place the cursor on the Timeline, then hold down CTRL while scrolling the mouse wheel to zoom in or out.

Managing Your View in the Timeline Pane

The Timeline lists out a scene together with its elements and all animated properties. Thus, if you’re creating complex animation, the list of elements and properties can go on forever. Fortunately, the Timeline pane has some controls that help you manage your view.

  • Click the triangle button to show or hide all animated properties of an element. If you want to expand or collapse all elements at once, click the Expand/Collapse Lanes button on the Actions bar.

expand collapse lanes

  • A scene may have a background image that stays unchanged over time. Obviously, you don’t need to clutter up the Timeline with those static elements. So, to filter out elements that contain no animation at all, click the Show Animated Elements Only button. Don’t worry because this only affects what you see in the Timeline, it doesn’t influence what appears on the Canvas.

show animated elements only

  • To the left of each element name, there’s a small color bar. Saola Animate automatically labels each element and its animation segments with a specific color. That way, you can quickly identify animation of an element.

html5 animation timeline pane

Showing, Hiding, and Locking Elements

It’s often hard to work with a lot of elements and complex animation. Chances are you cannot select an element on the Canvas because it’s behind others. To find a way out, you need look for that element in the Timeline by scrolling the mouse wheel.  And it’s also likely that you select the wrong element by accident because elements are placed so closely.

To solve these problems, Saola Animate provides two different controls: Visibility and Locking. Find these controls in the Timeline and the Elements pane.

visibility and locking in timeline pane

Showing and Hiding Elements

The Visibility decides whether to display elements in a scene while editing. This control is best used to help you hide some elements on the Canvas so that you can focus on the target elements. Bear in mind that this is only an interface feature allowing you to work with many elements. It does not affect the HTML5 animation you get after exporting the project.

In the Timeline or the Elements pane, notice the Show/Hide button next to the names of elements. An open eye means that an element is visible, whereas an eye with a slash indicates that it is invisible.

To show/hide all elements in a scene at once, click the Show/Hide All button on the Actions bar.

show hide elements

Mind the following:

  • When you hide an element, its child elements are also invisible.
  • When an element is hidden on the Canvas, it can still be selected and edited from other panes.
  • To control the visibility in the finished HTML5 animation, animate the Opacity or Display properties. This is useful when you want an element to fade in or out a scene. Or, you want an element to appear later in the animation and then make it disappear. Animate the Opacity from 0% to 100% to fade an element in, and from 100% to 0% to fade it out. Meanwhile, for the Display property, choose Off to make an element invisible and On to make it suddenly appear in a scene.

Locking and Unlocking Elements

Moving an element by mistake is a bad experience. For example, you want to move a text element but accidentally seize and drag a background photo. To avoid that, you can lock elements in their location. That way, elements cannot be selected, moved, or edited, but they still remain visible with the Visibility state on.

lock unlock elements

To lock an element, click the Lock/Unlock button next to the Show/Hide button. By default, elements are in the “unlock” state when the button looks like an open lock. At that time, you’re free to select them and make an edit. When you lock elements in place, the button turns into a closed clock and the element’s name gets dim.

To lock/unlock all elements in a scene at once, click the Lock/Unlock All button on the Actions bar.

You can also watch the video tutorial below to learn how to show/hide and lock/unlock elements:

So we’ve walked you through some basics and controls of the Timeline pane. Stay tuned for the coming tutorial as it will focus on different aspects of this pane, obviously helping out in creating interactive HTML5 animation.

Pin It on Pinterest