Jump to content


Tips for a advanced timeline in GreenSock

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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



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

Link to comment
Share on other sites

Hello buddy!


Welcome to GSAP Forum!


I notice that you have no attachment or links on what you're talking about it is better to give the link or picture attached on your post thanks!


Anyway if you're looking for advance tweening or usage of timelinelite or max watch the video below!


GSAP Enthusiast,


  • Like 1
Link to comment
Share on other sites

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. :(




If that is url, can you please shortened in using goolge shortener so we can able to see what you're trying to do

  • Like 1
Link to comment
Share on other sites

You're site is awesome buddy! Carl or Jack would help you about the animation that you want to achieve! My experience is not enough for that kind of stunning animation. Let's see what's Carl, Jonathan and Jack suggests about your animation request. Thanks!


GSAP Enthusiast,


  • Like 1
Link to comment
Share on other sites

Hello joacim88,


When I view your SWF file attachment it is just a loading spinner animation. Do you have an example what your trying to achieve?


Also you can check out this GSAP Jump Start Guide to get familar with the GSAP API





Link to comment
Share on other sites

  • 4 weeks later...

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>

This is going to be really cool when it's finished. Appreciate any help I can get. :)

Link to comment
Share on other sites

Hello joacim88, That will be a cool effect.


Its probably best that you provide a codepen example like WarenGonzaga suggested above.


z-index can be tricky and it will be impossible to even help you with testing your code in context live. Especially when you mix z-index with elements that have transforms, which sometimes negate any z-index on the element.

  • Like 1
Link to comment
Share on other sites

Any updates on the animation? Did you manage to create the animation for your website?

Link to comment
Share on other sites

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.

    position: absolute;
    margin:0 auto;

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

See the Pen RowMLr by joacim (@joacim) on CodePen

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. :) 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.