HyperFrames
CommunityDocs

Timing

Lesson 3 · 16 min · Learn it

STEP 1 · WATCH
2:45 · Captions on by default
STEP 2 · RECAP

What the video said

  1. 1A beat is a change on screen with a time: a word appears, a card leaves, a cut lands.
  2. 2Anchor every beat: to the music's tempo, to the words spoken, to reading time (about three words a second) or to how long a move takes to follow.
  3. 3At 120 beats a minute a beat is half a second: land cuts on the beats and small pops on the half beats.
  4. 4Group small beats under one big beat, keep big beats a third of a second apart, and leave a breath before the payoff.
  5. 5Say each time in seconds, keep this layer to pops and cuts, then scrub to each beat.
STEP 3 · WORDS

Words to know

beat

A change on screen that has a time: a word appears, a card leaves, a cut lands. A shot is a list of beats.

anchor

What a beat's time is based on: the music's tempo, the words spoken, how long text takes to read, how long a move takes to follow, or where the story needs weight.

stagger

Items in a group enter one after another with a tiny fixed gap instead of all at once.

STEP 4 · QUIZ
Question 1 of 5

Which line gives the agent a time it can set and you can check?

Pick an answer, then check it.

STEP 5 · MAKE IT

The prompt this lesson teaches

In Desktop, Framey builds this with you. Here it is, to read.

To FrameyRead-only

Now the timing. Use the names already in the piece. Simple appear, disappear and moves only: no easing, no zoom, no blur yet. Make each thing appear with a one-frame fade from nothing to full, and disappear the same way, so it reads as a pop. Moves run in a straight line at one steady speed. - 0.33 s: cut from scene 1 [#intro] to scene 2 [#camera]. The heading and card are gone on that frame and the panel, cursor and cards are there. - At the cut the cursor and the fan of four cards are already on screen at the top right. From 0.33 to 0.71 s the fan tightens around the cursor to about x 0.70 to 0.90, y 0.06 to 0.47. - 0.79 to 1.33 s: the cursor carries the stack to the center of the drop area. - 1.54 to 1.79 s: the four cards disappear one after another. - 1.67 s: the label "Adding clips..." appears and the drop area goes. The cursor is gone by 2.0 s. - From 1.67 s the 12 tiles appear one per frame in reading order (a frame is 0.042 s), so all 12 are there by 2.13 s. - The headline words appear at 2.71 s ("Launch"), 2.83 s ("from"), 2.92 s ("your") and 3.00 s ("clips"). - Everything else stays exactly where the first message put it. Write every tween as its own plain call: a plain number for its start time and plain numbers for its values and ease, with no helper functions, loops or arithmetic in tween calls, so the Check can read them.

Free for Mac, Windows and Linux

Practice it in Desktop

Timing: on your own

The timing of the hook: six words, the letters leaving, the swap to the tiny word, and the cut to the huge word.

Next lesson · 16 minCamera and transitions