StykAnimate

The Advanced timeline

Keys, holds and tweens on a ruler: add, move, copy and stretch keys, and jump between them.

12 minIntermediateStykAnimate 1.2.5

The Advanced timeline shows every layer on its own row, so each character can have its own timing. After this page you can read the rows, add and move keys, make a pose last longer and understand why posing one frame can change another.

The short version
  • A key (a dot) is a pose you made. The grey bar after it is the frames that hold that pose. A violet bar is a tween: the frames move toward the next key.
  • Click a cell, press A for a key, Shift+A to hold it a frame longer. Click a key, then drag it to change its timing.
  • Posing on a grey bar changes the key at the start of that bar. Press A first when you want a new pose there.

Try the timeline

This is the timeline from the app, with two figures on two layers. Do the tasks in order; each one is explained in the sections below.

Try itAdvanced timeline
00:00:00
Layers
0 of 8 done
  1. Click a cell in Blue’s row. The playhead jumps there.
  2. Click a cell inside a grey bar and press A.
  3. Pose Blue on a grey frame without a dot. Watch the dot at the start of the bar.
  4. Press Shift+A to hold a pose one frame longer.
  5. Click a dot, then drag it to another frame.
  6. Double-click a dot and choose Auto.
  7. Press Shift+. to jump to the next key.
  8. Press Space to play.

Point at the playground first, so the keys go to it and not to the page.

Read the rows

Each row is a layer. Each column is one frame of the video, numbered on the ruler every 5 frames. A whole column, top to bottom, is what the stage shows at that moment.

  • Camera and Scene are always the top two rows. Camera remembers the framing, Scene the background. Your figure layers come below them.
  • A dot is a key: a pose you set on that frame. Camera keys are gold, Scene keys violet.
  • The grey bar after a key is a hold: those frames show the same pose. A thin line marks each frame inside it.
  • A violet bar is a tween: the frames move from this key’s pose to the next key’s pose. It appears when the key’s easing is anything but Constant.
  • A dashed outline after a hollow dot is a blank: the layer shows nothing there.
  • Before a layer’s first key and after the end of its bar, the layer shows nothing. The line across the whole grid is the end of the animation; after it the grid is grey.

The coloured dot beside a layer’s name is only a label to help you find the row. Rows higher in the list are drawn in front.

Add a key

  1. Click the cell where the new pose should start. The playhead (the blue line with the frame number) jumps there and the cell gets a blue outline.
  2. Press A, or click + Add frame at the left of the timeline header. A dot appears in the cell. It holds the pose you saw there, so nothing moves yet.
  3. Pose the figure on the stage. Only this key changes; the frames before it keep their pose.

If the cell already has a key, A works like in Pivot: it copies that pose into the next frame and moves every later key on the row one frame along, and the playhead goes to the copy. You can also double-click a cell without a dot to add a key there.

Keep posing while you add

Press A while you are still dragging a dot. The app adds the frame and you keep posing on it without letting go.

A blank key: make a layer disappear

Select a cell and press F7. A hollow dot appears, and from there until the next key the layer shows nothing. Use it when a character leaves the scene: blank at the frame they vanish, then add a normal key where they come back.

Why posing a grey frame changes an earlier key

This is the part that surprises most people. A grey frame has no pose of its own: it shows the key at the start of its bar. So when you pose Blue on a grey frame, you are really editing that key, and every frame of the bar changes, including the ones before the playhead.

  1. Look at the cell under the playhead. A dot means you are on a key; a plain grey cell means you are on a hold.
  2. On a hold, press A first. Now the frame has its own key.
  3. Pose the figure. The frames before the new key keep the old pose.

Inside a violet tween it’s different: there is no single pose to change, so posing adds a new key on that frame for you.

Changed the wrong pose?

Press Ctrl+Z (Cmd+Z on a Mac) to undo it. Then click the frame you meant, press A, and pose again.

Auto key

Auto key in the timeline header (or K) makes the app press A for you: any change on a frame without its own key adds a key at the playhead. While it is on, the playhead turns red. It is off in new installs, it only exists in the Advanced timeline, and the app remembers your choice. A new key copies the easing of the key before it.

Make a pose last longer or shorter

At 24 frames per second, a pose that holds for 12 frames lasts half a second. There are three ways to change it:

  1. One frame at a time: click a cell in the bar and press Shift+A. The bar gets one frame longer and every later key on that row moves one frame along.
  2. Drag the end of the bar: click a cell in the bar, then point at the end of the bar. A small blue grip appears; drag it right to hold longer or left to hold shorter. A label shows the change, for example “6 → 9”. Later keys move with it.
  3. Remove frames: select the frames and press Shift+F5. That time is cut out and everything after moves back.

All three change only the rows you selected. To delay one character while the others keep their timing, select a cell in that character’s row only.

Move or copy keys

  1. Click a key to select it. To select several, drag across cells (even across rows), or click one cell and Shift-click another.
  2. Drag the selection left or right. The label shows where it lands. Hold Alt while you drag to copy instead of moving.
  3. Let go. Press Esc before letting go to cancel.

A drag that starts on a cell that is not selected makes a new selection instead of moving anything, so click first, then drag. If a key lands exactly on another key, it replaces it (Settings → Animation → Keyframes → Replace keyframes on drop, on by default). Keys in between stay where they are.

Example: Red should react to Blue’s wave three frames later. Click Red’s second key, drag it three cells right, and let go. Blue’s row does not change.

Delete a key, or delete time?

You pressWhat happensUse it when
Delete (or Shift+F6, Remove keyframes)The selected keys go. The time stays: the key before now holds through. The key on frame 1 always stays.A pose is wrong and the one before should continue.
Shift+F5, Remove framesThe selected frames are cut out and everything later moves back.The action is too slow and you want it shorter.
F7, blank keyThe layer shows nothing from here until its next key. No time is removed.A character should disappear for a while.

The timeline has to have the focus: click a cell first. When you last clicked the stage, Delete deletes the selected figure instead.

Previous / next frame,or.
Previous / next keyOn the selected layerShift+,orShift+.
First / last frameHomeorEnd
Select the layer above / belowWith the grid focused↑or↓
Play / pauseSpace
Zoom the timelineOr the zoom slider in the headerCtrl+Scroll

Drag along the ruler to scrub. Click the time in the header to type a frame number. Fit timeline, next to the zoom slider, shows the whole animation at once, and right-clicking the ruler offers Fit animation and Reveal playhead. The ⋯ button at the end of the header has Last frame, Previous key and Next key.

Right-click menus

Right-click a cell for Add frame, Change easing…, Extend exposure, Copy frames, Cut frames, Paste frames and Remove frames. Right-click a layer’s name to rename it, colour it, move it, hide or lock it (see Layers).

Paste frames replaces the frames from the selected cell onwards on the selected rows; it does not push anything later. Copies on the same layer stay the same figure; pasted onto another layer or project they become new copies.

Edit several frames together

Select two or more frames and Edit together appears in the timeline header. Turn it on, and a change on the stage, such as moving the figure, goes into every selected frame at once. Use it to shift a whole action to another spot on the stage.

Questions

My figure disappears after a while.

Its row ends there. Click the last cell of its bar and press Shift+A, drag the grip at the end of the bar, or add a key further right.

I pressed Delete but the animation is just as long.

Delete removes keys, not time. Use Shift+F5 (Remove frames) to make it shorter.

I dragged a key but it didn’t move. It selected cells instead.

Click the key first so it is selected, then drag it.

Every frame of my pose changed when I posed one.

You posed a grey (held) frame, which edits the key at the start of its bar. Undo, click the frame, press A, then pose. Or turn on Auto key.

Why does my move snap instead of gliding?

The key before it uses Constant easing. Double-click that key and choose Auto. See Easing.

Next

Still stuck?

Ask the community, or tell us what’s missing from the docs.