Creating timelines

An important aspect of layers is that you can position them freely anywhere on a page. Using JavaScript, it is even possible to change the position of a layer after the page has been opened in a browser. Timelines take advantage of this fact. By creating a timeline, you describe a sequence of positional changes, affecting one or more layers, that the browser will execute at some point after loading the page. You can set a timeline to start automatically when the browser has finished loading the page, or the timeline can be started by a script action attached to some event (such as clicking a specific image).

A timeline consists of a sequence of frames, like the frames of a movie. When a browser “plays” a timeline, it steps through each frame from first to last, one after another, at a certain speed. Each frame describes the state of one or more layers at a point in time. The state of a layer includes its position, size, visibility, and z-index.

A timeline contains one or more sprites arranged in time, like notes in a musical score. Each sprite controls the motion or changing state of one layer across a certain number of frames.

Namo Web Editor 5.script.timeline.1.2 Creating timelines

An example timeline with four sprites

The example timeline pictured above contains four sprites (the lavender bars), named after the layers they control. As you can see, sprites can overlap—meaning that two or more layers are in motion or changing state at the same time. Two sprites can control the same layer, but then they cannot overlap.

Each sprite has at least two keyframes—frames at which the position/state of the associated layer is explicitly specified by you. Keyframes are indicated by large white dots on the sprite. The first and last frames of a sprite must be keyframes. You can add more keyframes anywhere in the sprite. In the frames between keyframes, the position/state of the layer is interpolated by Namo WebEditor. This fact lets you create a smooth animation by defining the position/state of a layer at just two points in time and letting Namo WebEditor take care of the in-between frames.

In addition to controlling the position/state of one or more layers over time, a timeline can trigger actions at specific frames. For example, when a timeline reaches the twentieth frame, it can trigger an action that causes the browser to start another timeline or reveal a hidden element.

In this section

Creating and editing timelines

Starting and stopping timelines

Attaching actions to a timeline

Related topics

Using layers

Working with actions and events

Creating timelines