Question: I have three yellow bars and each of them needs to come from left to right. For that, I have produced this code, but it only works on the last one. Can anyone correct this code; I need to work with pure JavaScript. I am not using any framework. Thanks.

```
window.onload = function(){  

    var yellowTitles = document.getElementById('magazine-brief').getElementsByTagName('h2');

    for(i=0; i< yellowTitles.length; i++) {
        var header = yellowTitles[i];
        var timer = i*500;
        var yellowBar = setTimeout(animeYellowBar,timer);

        function animeYellowBar(){
           header.style.left= "0";
        }

    }

}

```

Answer: 
Shouldn't you be incrementing your CSS left value instead of just setting it to 0? Why have a timeout at all if you're just going to set the value without gradually incrementing or decrementing?

If you do actually want to use a gradual animation, look at this tutorial : <http://www.schillmania.com/content/projects/javascript-animation-1/>

Very descriptive and possibly what you want.
By the time your timeout function runs, `header` refers to your last `h2`.

Try editing your timeout function to this:

```
function animeYellowBar(){
       var thisheader=header;
       thisheader.style.left= "0";
    }

```