Right so,
The problem with z-index was solved by having the .row height:0; and allowing it to have overflow. So only the circles have height.
.row{
display:flex;
align-self:flex-end;
position: absolute;
bottom:0px;
height:0px;
margin:0 auto;
width:100%;
justify-content:space-between;
}
But I am running in to new problems.
So you should be able to forward, pause and reverse the animation. You should also be able to use a slide to jump to a certin location in this timeline.
Problem 1:
By reversing. Some circles are popping up in their original location. They should not be displayed. And I've tried to use the autoAlpha:0 so hide them. But they are keeping poping up in the wrong location. Any clues?
Problem 2: Using the slide. And then running the animation forward I keep getting performance issues. It lags. It's okey sometimes in Chrome but Firefox and Edge are really lagging. Any clues?
Here is the code http://codepen.io/joacim/pen/RowMLr Keep in mind that this is the first time I'm using Greensock so maybe I've gotten something basic wrong? All suggestions are appreciated and have a great weekend.