Five easing curves
The table is printed first. In the picture, the top ball (grey) is linear.
Move a value from A to B over a set time along a curve that starts slow, ends slow or overshoots. You write the tween by hand, then compare it with damp and a spring when the target keeps changing.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write createTween(from, to, duration, ease) with a tick(delta) that returns the value, and show that tick(0.5) for from = 0, to = 1, duration = 1 with easeOutCubic is 0.875.
A sphere should follow a mouse x position with damp. Write the frame code with lambda 8.
Explain it without notes
Why must a tween clamp elapsed to the duration?
A slider moves the camera's target every frame. Would you use a tween or damp, and why?
Console
Nothing logged yet.Expected console output
t 0 0.25 0.5 0.75 1 1.5 -0.5
linear 0.000 0.250 0.500 0.750 1.000 1.500 -0.500
easeInQuad 0.000 0.063 0.250 0.563 1.000 2.250 0.250
easeOutCubic 0.000 0.578 0.875 0.984 1.000 1.125 -2.375
easeInOutCubic 0.000 0.063 0.500 0.938 1.000 1.500 -0.500
easeOutBack 0.000 0.817 1.088 1.064 1.000 1.763 -4.289
clamp(1.5, 0, 1) = 1 | lerp(2, 10, 0.25) = 4