# Bounce Back explainer

The aim of this puzzle: Change the easing function to make the `ball` bounce instead of fall.

Walkthrough of the solution: When an attribute is changed, it’s clear what the starting and ending will look like, but it’s not clear what all of the in-between steps should be.

If you drew 2 points on a piece of paper and were told to connect them, how could you do it? A straight line. But also a wavy line, or what about a path that goes all over and crosses through the finish point a few times before finally landing there for good? The path from start to finish of a transition is determined by its easing function.

To set the easing, you use `.ease()` and attach it to the `.transition()` (or one of the other calls attached to the `.transition()`). The value that goes in the parentheses is actually a function, but you can think of it as a path from start to finish. The `d3` library has some built-in functions you can use, like `easeQuad` and `easeBack`. To access these functions, you use `d3.easeQuad` and `d3.easeBack`.

There is a function called `easeBounce` which makes the path look like a bouncing ball. It goes from Start to Finish, then back about halfway, then to Finish, then back just a little bit, then back to Finish, and so on. To apply this bounce effect to the `ball`'s transition, you use `.ease(d3.easeBounce)`

Sample code solution:
(Tap below to reveal)

``````function bounce() {
ball.transition().duration(1000).ease(d3.easeBounce).attr('cy', 175);
}
ball.on('click', bounce);
``````

JavaScript Concepts: Code Block (function)

D3 Concepts: `.attr('cy',)`, `.duration()`, `.ease()`, `.on('click',...)`, `.transition()`

It doesnt allow me to remove anything to update to what it is asking.

Hey there,

Tap on the `.easeQuad` in the starter code to highlight it, then press the delete key to remove it. Then, with `d3` highlighted, tap the `.easeBounce` key.

Hope this helps! Let me know if you have any questions.
Ben