joacim88

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.

Alright guys, Here's an update. So I have somehow managed to make this animation work. (see picture https://postimg.org/image/ug7kiitfx/ ) So these circles are now coming towards the viewer in a very cool way. And I can control the animation. The thing is that you should be able to click on these circles and get information about that circle. Now there is a problem that the div that hold these boxes has a higher z-index than the div behind it. Making only half of the circle clickable as you can see in the picture. And there are probably two ways of solving this. 1. Making the div that is hovered lower it's z-index and make the circle obtain that z-index instead. The problem is that greensock overrides my manipulation of that element. Is there someway to make greensock thing it's okey to manipulate it? 2. As I am animation the div that contains the circles. I'd rather set the z-index on the circles instead of the div. But that would mean I'd to rebuild my animation. Is there a way to set tween on children? Html is <div class="row"> <div class="circle"></div> ... .</div> This is going to be really cool when it's finished. Appreciate any help I can get.

Thanks man! It worked with short url. https://goo.gl/67ie7x Any clues on this one?

So this url is kind of important to get a sense of what I'm trying to do. Don't know why it did not get included. Yeah I know. It's a evil Flash. http://static.guim.co.uk/interactivestore/2015/6/19/1434714407690/113044/MERPreloader.swf

Hi, I'm new to this GreenSock framework but as far as I've seen it seems great. I am planing to do a kind of advanced timeline and hoping that GreenSock is the awnser. Look at this that The Guardian made __http://static.guim.co.uk/interactivestore/2015/6/19/1434714407690/113044/MERPreloader.swf https://goo.gl/67ie7x I am going to do the same in GreenSock. Any tips of how I am going to manage this? Tips on transitions to use? Any one know a example like this? Any tips is much appriciated. Best regards Joacim