Motion

Start at 01. The first lesson names the types. The next one builds an object. Each sample is on the page.

1. Skill

   Basics

   The types, explained, then an object you can name and call.

   1. 01 Motion from zero: time and distance are numbers Start here

      A duration is a number of milliseconds. A distance is a number of pixels. 320 and 24 slide a price label. The program prints 320 and 24.

      Adds The types this course uses

      2 min read

   2. 02 Motion from zero: an animation is an object

      One object holds the slide of a price label: the duration, the distance, and the opacity. The program builds one and prints 320, 24, and 1.

      Adds An object you can name and call

      Builds on 12 min read

2. Practice

   Tips

   A rule that prevents a bug, then a program that uses the object.

   1. 03 Motion from zero: move the transform, not the width

      Changing width makes the browser lay the page out again. Changing a transform does not. The price label moves with translateX(24px). Its width stays.

      Adds A tip that prevents a bug

      Builds on 1 through 22 min read

   2. 04 Motion from zero: easing is a function of time

      Easing maps a time from 0 to 1 onto a progress from 0 to 1. easeOut is slow at the end. The program prints 0, 0.75, and 1.

      Adds A program that uses the object

      Builds on 1 through 32 min read

3. Further

   A whole program

   One more idea, then a program that puts the pieces together.

   1. 05 Motion from zero: reduced motion sets the duration to zero

      Some readers ask the system for less motion. Honor it by using a duration of 0. The program prints 320 for a normal run and 0 when motion is reduced.

      Adds A program that puts the pieces together

      Builds on 1 through 42 min read

   2. 06 Motion from zero: the second step starts where the first ended

      Two steps share one object. The second step's fromX is the first step's x. The program prints 0 then 24, then 24 then 48.

      Adds A program that puts the pieces together

      Builds on 1 through 52 min read