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