# Slow Down explainer

Aim of the puzzle:
Use the duration method `.duration()` to change the speed on an SVG animation.

Walk through of solution:
The duration method `.duration()` defines the amount of time, in milliseconds, that a `.transition()` takes to complete. The higher the number, the slower the animation.

In the code that you start off with, there is a function `move` and an event handler that calls `move` when `shapes` is tapped. The `move` function does two things: it transitions the circles from their current `'cx'` position to `400` over the course of 1000 milliseconds (1 second), and - at the same time - it transitions the squares from their current `'x'` position to `-400` over the course of 1000 milliseconds (1 second). In this puzzle, you’ll slow that animation down by adjusting the `.duration()` of the `.transition()` to a higher number.

To complete the puzzle, change the argument of each duration method `.duration()` to 4000 (4 seconds). Now, when you tap on the shapes they won’t move as quickly as before.

Sample code solution:

``````function move() {
circles.transition()
.duration(4000)
.attr('cx',400)

squares.transition()
.duration(4000)
.attr('x',-400)
}

shapes.on('click', move);
``````

Javascript Concepts: Variable, Event Handler, Function
D3 Concepts: Attribute, `.duration()`, `.transition()`
Additional Code (hidden code that runs before the puzzle’s code):

``````for (let i =0; i<10; i++){
let color = d3.rgb(pickRandom(255), pickRandom(255), pickRandom(255))
let circle = svg.append('circle')
.attr('r',10 + Math.random()*25)
.attr('cx',Math.random()*window.innerWidth)
.attr('cy',Math.random()*window.innerHeight)
.attr('fill',color)
.attr('opacity',`\${0.2*pickRandom(9)}`);
}

for (let i =0; i<10; i++){
let color = d3.rgb(pickRandom(255), pickRandom(255), pickRandom(255))
let square = svg.append('rect')
.attr('width',30 + Math.random()*6)
.attr('height',30 + Math.random()*6)
.attr('x',Math.random()*window.innerWidth)
.attr('y',Math.random()*window.innerHeight)
.attr('fill',color)
.attr('opacity',`\${0.5*pickRandom(9)}`);
}

let circles = d3.selectAll('circle')
let squares = d3.selectAll('rect')

let shapes = d3.selectAll('circle, rect')
``````

The code is right and this practice puzzle passes me, but the animation is taking place instanteously. There seems to be a bug in the duration attribute.