A tween by hand, and a moving target
The target jumps at frame 31. Each cell is the value and, in brackets, its speed in units a second.
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
target 1 until frame 30, then 2. Each cell: value (speed in units per second)
frame 30 tween 0.875 (0.78) damp 0.950 (0.31) spring 0.944 (0.40)
frame 31 tween 0.930 (3.32) damp 1.050 (5.99) spring 0.975 (1.85)
frame 32 tween 0.984 (3.21) damp 1.141 (5.42) spring 1.022 (2.80)
frame 60 tween 1.859 (0.87) damp 1.948 (0.33) spring 1.943 (0.41)
frame 90 tween 2.000 (0.00) damp 1.997 (0.02) spring 1.998 (0.01)