# Hop Around explainer

#1

The aim of this puzzle: Make the `player` hop to the right when the `yellowButton` is tapped.

Walkthrough of the solution: The hopping animation has 2 `.transition()`s: 1st move the `player` to the side and lift it up, 2nd drop the `player` down and let it bounce.

The `blueButton`'s `.on('click',)` is already complete. The 1st `.transition()` has `.attr('cx',playerCX).attr('cy',100)`. That will move the circle to the left by using the updated `playerCX` value and up to 100. The `yellowButton` should also have an `.attr('cy',100)` so that the `player` goes up as it moves to the side.

The 2nd `.transition()` for the `blueButton` moves the `'cy'` back to to ground which is stored in `playerCY`. To make the circle bounce, the `.ease()` of the `.transition()` has to be changed. D3 has an easing function called `easeBounce` which can be accessed using `d3.easeBounce`. Inside the `yellowButton`'s arrow function, attach another `.transition()` followed by the `.attr('cy',playerCY)` and then `.ease(d3.easeBounce)`. The order of the last `.attr()` and `.ease()` can be swapped, as long as they both come after the 2nd `.transition()`.

Sample code solution:
(Tap below to reveal)

``````blueButton.on('click', () => {
playerCX -= 30;
player.transition()
.attr('cx', playerCX)
.attr('cy', 100)
.transition()
.ease(d3.easeBounce)
.attr('cy', playerCY);
});
yellowButton.on('click', () => {
playerCX += 30;
player.transition()
.attr('cx', playerCX)
.attr('cy', 100)
.transition()
.ease(d3.easeBounce)
.attr('cy', playerCY);
});
``````

JavaScript Concepts: Assignment Operator (`+=`, `-=`),Code Block (arrow function), Member Expression, Identifiers

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

#3

Why is this Code so difficult for me to complete,I’ve even followed the Sample solution code and it isn’t letting me pass this practice lesson at all😅.Can someone help me out with this.