Eight easings, as numbers and as curves
Time runs across, progress up. Back and elastic rise above the dotted line (the final value).
Easing decides how fast a movement is at each moment: slow at the start, fast in the middle, or even past the target. Duration and delay decide how long it lasts and when each mark starts. Good motion is short, and it ends where the data says.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write fixedStep(count) as above, then use it for the bars of the second example with d3.easeCubicOut. Log the time the last bar starts and the time the transition ends.
Write safeDelay(d, i, step) that uses d.rank when it is a finite number and i otherwise. Test it with { rank: 3 }, {} and { rank: NaN } and step 40.
Explain it without notes
What does an easing function take and return?
Which easing would you pick for a bar growing to its value, and which for a bar that must not pass its value?
Why should a stagger step depend on the number of marks?
Preview
Console
Nothing logged yet.Expected console output
t 0 0.1 0.25 0.5 0.75 1
easeLinear 0.00 0.10 0.25 0.50 0.75 1.00
easeCubicInOut 0.00 0.00 0.06 0.50 0.94 1.00
easeCubicOut 0.00 0.27 0.58 0.88 0.98 1.00
easeCubicIn 0.00 0.00 0.02 0.13 0.42 1.00
easeBackOut 0.00 0.41 0.82 1.09 1.06 1.00
easeElasticOut 0.00 1.25 0.91 1.02 1.00 1.00
easeBounceOut 0.00 0.08 0.47 0.77 0.97 1.00
easeExpOut 0.00 0.50 0.82 0.97 1.00 1.00
every easing starts at 0 and ends at 1: true
goes past 1 on the way: easeBackOut reaches 1.10, easeElasticOut reaches 1.37