To bounce we can use CSS property
position:absolute for the ball inside the field with
The bottom coordinate of the field is
field.clientHeight. The CSS
top property refers to the upper edge of the ball. So it should go from
field.clientHeight - ball.clientHeight, that’s the final lowest position of the upper edge of the ball.
To to get the “bouncing” effect we can use the timing function
Here’s the final code for the animation:
let to = field.clientHeight - ball.clientHeight;
In the task info:task/animate-ball we had only one property to animate. Now we need one more:
The horizontal coordinate changes by another law: it does not “bounce”, but gradually increases shifting the ball to the right.
We can write one more
animate for it.
As the time function we could use
linear, but something like
makeEaseOut(quad) looks much better.
let height = field.clientHeight - ball.clientHeight;