Motion from zero: time and distance are numbers

A price label sliding into place is a change from one value to another over time. Before the library, the values are numbers, and the numbers have units you must remember. Time in this lesson is milliseconds. Distance is pixels. 320 milliseconds and 24 pixels are this slide. A function that receives 320 cannot tell you the unit. You can.

The numbers are meaningless without a unit#

320 is not a duration until you decide it is milliseconds. Some libraries take seconds, and 320 seconds is several minutes. The variable name is where this course stores the unit, because the number itself cannot. A distance of 24 is pixels, the CSS pixel, not a fraction of the screen. console.log prints the numbers without the units, so a name like d would run and would also hide the only fact that makes the number usable. Zero is a legal duration: the value jumps to the end.

1. durationmilliseconds320
2. distancepixels24

const duration = 320;
const distance = 24;
console.log(duration, distance);

320 24

Name the unit in the name or beside it#

duration is 320 milliseconds, about a third of a second. distance is 24 pixels. console.log prints the numbers and not the units, so the names have to carry the meaning. d and x would also run. They would not tell the next reader whether 320 is milliseconds or a frame count.

Libraries ask for these same numbers. GSAP's duration is in seconds, not milliseconds. A 320 there would be a five-minute move. Read the unit in the library you are calling. This course uses milliseconds until a lesson says otherwise, and the object in the next lesson says ms in the field name.

Zero is a real duration#

A duration of 0 means the value jumps to the end. That is useful, and a later lesson uses it when the reader asked for less motion. It is not an error. A distance of 0 means the element does not move. The next lesson puts both numbers, plus the opacity, on one object.