# Hop Around explainer

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()`
Additional Code (hidden code that runs before the puzzle’s code):

``````let color = [...Array(36)].map((_,i)=>`hsl(\${10*i},100%,50%)`);

let playerCX = window.innerWidth/2;
let playerCY = window.innerHeight-30;
let player = svg.append('circle').attr('r',30).attr('cx',playerCX).attr('cy',playerCY).attr('fill',pickRandom(color));

let blueButton = svg.append('rect').attr('width',50).attr('height',50).attr('x',0).attr('y',0).attr('fill','#4285F4');
let yellowButton = svg.append('rect').attr('width',50).attr('height',50).attr('x',50).attr('y',0).attr('fill','#F4B400');
``````

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.