Timeline positioning
An element can be moved on the timeline by clicking and dragging it to a new location. Similarly, an element's duration can be changed by dragging its edges.
As the example above shows, an element automatically snaps to nearby elements. When it snaps to the preceding element on the same track, its start is set to Auto, linking the two elements together, indicated by a chain link on the seam between the two bars. From that point on, the element always starts exactly where the preceding element ends, even when that element is moved or changes in length. When an element is dragged over a preceding element, a transition is inserted between the two.
Timeline indicators
Every bar in the timeline shows how its element is timed using a set of indicators. The icon at the left edge of a bar (or on the seam with the previous bar) relates to the element's start; the icons at the right edge relate to its duration:
| Icon | Mode | What it does |
|---|---|---|
| Auto start | The element starts exactly where the preceding element on its track ends, and moves along with it. The chain link is shown on the seam between the two bars. | |
| Auto duration | The element expands to fill the available time. | |
| Media duration | The element plays for the full length of its source clip. This applies to videos and audio. | |
| Fixed | The element is pinned to a set value. At the left edge it marks a fixed start time, which won't follow along when earlier elements change in length; at the right edge it marks a fixed duration of a set number of seconds. | |
| Loop | The element repeats itself to fill its time. This icon is shown in front of the duration icon. |
When Creatomate detects a possible timing problem, the icon it relates to turns amber, like this: . For example, this happens when an element is set to start at a fixed time while placed behind a video whose length varies from render to render. Click the icon to see what's going on and how to fix it.
Inspecting an element's timing
These indicators are clickable. Clicking one opens a popup that explains in plain words how the element is currently timed, and lets you change its Start, Duration, and Loop settings right there. If a timing problem was detected, the popup also describes the issue and highlights the recommended setting:
The same settings are available under the Arrange properties in the right-hand panel. In the following example, both the Start and Duration are set to Auto, meaning their values are calculated automatically:
