HyperFrames
CommunityDocs

Motion and finish

Lesson 5 · 16 min · Learn it

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

What the video said

  1. 1The last layer is motion and finish: ease, overshoot, stagger, smear and glow, on a shot whose beats are already right.
  2. 2Name the ease for each move and say how long it takes.
  3. 3Say an overshoot as a number, like 1.12x, then settle to 1.0x.
  4. 4Put a one-frame smear on very fast moves, and keep a stagger to one gap.
  5. 5End with a never list, and say every earlier time stays.
STEP 3 · WORDS

Words to know

smear

A one-frame blur along the direction of a very fast move, so the eye reads it as speed.

overshoot

Going slightly past the resting point, then settling back.

ease out

A move that starts fast and slows into place.

STEP 4 · QUIZ
Question 1 of 4

A pop feels flat. Which ask makes it feel alive and is easy to tune?

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 motion and finish. Keep every time from before and give each move its character. - Cursor: still until 0.79 s. Its carry to the drop area (0.79 to 1.33 s) starts slowly, is fastest at 1.04 s, then slows to a stop with no overshoot. At the fastest point add a one-frame smear along its line of travel. From 1.71 to 2.0 s it shrinks away in place. - Cards: each shrinks to nothing about its own center in three frames, with blur rising to 10 px. - Tiles: each scales up from 0 in place, overshoots to 1.12x at 0.25 s after it starts (ease back.out) and settles at 1.0x by 0.42 s, any early blur clearing. Keep them one frame apart. - The word "Drop" in the drop area brightens at 0.54 to 0.58 s and a glint runs right through the phrase until 0.79 s. - Headline: each word arrives with a one-frame sideways smear, then is sharp. The whole line starts at 1.39x and shrinks through 1.0x at 3.21 s, and keeps shrinking with no hold. - Never: a hand cursor, a dissolve, a headline that slides in as one block, bold type, blur past 11 px. 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

Motion and finish: on your own

The motion of the hook: wiped-in words, letters that leave in hard steps, a slide, a swell and a pull-back.

Next lesson · 10 minLayer a whole shot