Jump to content


GSDevTools for two different timelines

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 have two timelines setup doing a great job. At the end of each timeline I have GSDevTools.create(). It first seems to work fine, e.g. wenn hit the button, the second timeline starts well. But the curious thing is, that if the first timeline runs for more than 5 seconds, the 2nd timeline GSDevTool Display is not okay anymore. Means the timeline lost 20 seconds somehow and when the play control is done, the animation is still running for 20 seconds or more. Any idea how to approoach to get two nice controllable timelines here, which display correct data? Thanks a lot

See the Pen MGXRmz by generaal-locke (@generaal-locke) on CodePen

Link to comment
Share on other sites

Thanks for the demo. I'm having a difficult time understanding what you want.


After you watch the first timeline play and then click the button to play the second timeline do you want GSDevTools to control BOTH timelines or just the second one?

Link to comment
Share on other sites

Hey, thanks for reply. Actually the second part. Overall GSDevTools should always interact with the timeline I am playing.

If I jump out the second into a third, it should reset again, showing the exact duration of timeline played. No other timelines should be controlled 

in that time, always just one is in focus. 


Think of three timelines played after each other, not concurrent. In a concurrent case I would prefer a global timeline. In a sequence, I prefer a control pane per timeline. The breakpoint is either a command when the previous timeline is stopped, or where the new one is started. 


I expected listing GSDevTools at each end of a timeline would lead into a kill of the first (either kill of timeline itself, at least control pane for timelines) and somehow it does in my codepen example. But only if I change to second timeline fast by hiting the button. If I wait to long, the same lines of code are doing different things. What I guess is coming from a wrong usage and not the tool itself.


I hope things are a bit clearer now

Link to comment
Share on other sites

I'm not 100% sure I understand the question, but you can give IDs to your timelines and use the GSDevTools dropdown to access them. The staggers in timeline 1 seemed a bit odd so I made a small change to this fork of your pen so you can better see what's happening.


See the Pen gzjgwV by PointC (@PointC) on CodePen


I'd also recommend creating your timelines in advance rather than each time you click. Hopefully this helps. Happy tweening.




Link to comment
Share on other sites

One tricky concept which is probably causing a little confusion/complexity here is the whole "globalSync" thing (and the fact that it defaults to true). To maximize performance, GSDevTools basically records all the animations that are created in the first 2 seconds of the document loading (you can adjust that value, like GSDevTools.globalRecordingTime = 10 to make it 10 seconds, for example) and that's what's in the "global" recording. In your case, it looks like you're creating animations AFTER that recording finished (thus they're not inside that globally-recorded timeline). 


The solution should be as simple as defining the animation that the GSDevTools should be wired to, and setting globalSync:false on your subsequent GSDevTools instances, like:


GSDevTools.create({animation:yourTimeline, globalSync:false});


And of course you'd probably want to get rid of that original GSDevTools instance. Here's a reduced test case: 

See the Pen ?editors=0010 by GreenSock (@GreenSock) on CodePen


If your goal is to wire the GSDevTools to a particular animation, I'd strongly recommend just always doing this (even for the initial one): 

GSDevTools.create({animation:yourTimeline, globalSync:false});


Does that clear things up? 


In the next release of GSDevTools, I'll make globalSync default to "false" if you define an animation and it's after the globalRecordingTime has elapsed. That's probably the most intuitive behavior. Sorry about any confusion. 

  • Like 3
Link to comment
Share on other sites

Awesome, I tested already both examples, the case with the ID from Craig, and the case from Jack and it literally does what I need to. The detailed description of Jack even brought up some new aspects I didnt see before. Thanks a lot for that. I saw another post which was talking about these 2 seconds thing. Others probably also experienced things like me. But somehow I didnt get the relation to my topic. But now its totally clear. Again THANKS

  • Like 2
Link to comment
Share on other sites

I saw the GSDevTools Videos and I recognized everyone has a cooler player than me. Its because I am developing in mobile view. I have two issues here an a question if someone has an idea for a cool workaround.


1.) Working with GSDevTools in real smartphones is hard. Its somehow messy to touch it on iPhone 6/7/8. Its there, but you cant grab it. Sometimes it works, sometimes the control elements are no touchable. Mobile testing can be done well only in mobile telephones, hence a working devtool here would be the help of my life.

2.) Before we check in real phones, we checkout ff or chromes mobile view. Its working like a charme but a lot of nice features are gone, where just the play button and the timecontrol is left. No access to parallel timelines by ID, no chance to hit start and end markers. 


Is there a nice trick or even a known browser setting to have GSDevTools running in total without loosing mobile view on the screen? And for smartphones I have no idea how to approach. I mean who still uses computers? Instead of developers :-)

Link to comment
Share on other sites

Ah, it sounds like you're just getting the responsive mode for smaller screens. That's very intentional, of course - small screens simply don't have enough room to fit all the goodies. I wish I could magically make it all fit :)


You can, of course, still target specific animations to focus on via code, like:



It's not as cool as interactively selecting it in the drop-down, but hopefully that'll help. 


I suppose if you really want that drop-down visible, you could set up some CSS that overrules things, like: 

.gs-dev-tools .select-animation-container {
  display: block !important;


As for touch not working very well, I'd be very curious to see what you mean. I haven't experienced anything like that and nobody else has reported something similar. Is there a particular device/browser where this is happening? Any secrets to reproducing it? I've used my iPhone 7 and iPad and it seemed just fine.

  • Like 2
Link to comment
Share on other sites

Yes, I am already dealing with animation selectors. I changed that already in a way, that GVDevTools learn by script which tl is active. So this saves at least the time to switch the code, because jumping between timelines is otherwise no fun. I will try that display block hack later and let u know. 


In regard to the touch issue I like to take back my words :-). I had a working bar at MAC computer, but a "sticky" bar at all my phones and pads. But as I started to inspect after your message, the problem was gone. I am not totally sure, but since I am dealing with keyframes vor different screens,. it might happened, that I somehow moved or overlayered the touch part in a way that is was still visible, but not touchable anymore. Since it worked in the computer and since I never used GSDevTools in my real smartphone before, I simply thought that its not working. So sorry for a wrong report. 

Link to comment
Share on other sites

Sorri for asking so much questions about DevTool Element, but by now, its by far the most interesting thing to me, because if it works well, my job is done in half time. Wasnt that even something your site promises :-)


Please check my 

See the Pen MGPbmx by generaal-locke (@generaal-locke) on CodePen

once more


I have two issues here:


1.) In GSDevTools I state a very small timescale. But its not honored. The time-scale is displayed correctly in browser, but my new time-scale value is simply the new scale of 1. So whatever I write there its the speed of one and the label of my choice. Is this something I need to achieve with duration instead? But whats the usage of changing the timescale if each value has the same impact? I think I see sth wrong here..

2.) The less fun part. I guess its has something to do again with this 2 seconds magic happening in the beginning.  Sop here is the way to reproduce


- start the pen

- pause the timeline before 2 seconds are gone

- refresh your browser


what would u expect? Timeline at start position and if you hit play, its starts from 0. Right? And thats the case.


- start the pen

- pause in the middle (5 sec or so)

- refresh your browser


Something is different. Playbars Timeline is in 0 position, but  GreenSocks Timeline starts to play from pos1 somehow. This is my question. Why?


- start the pen


- refresh while timeline is running (after 5 sec or so)


Now you have again the good picture.


So the pause is somehow installing a fixed position. Doesnt matter where you stop. If it is later than that magic 2 seconds,. it always starts from a position I dont know who has configured it :-) Can u find it out?


Thanks a lot.

Link to comment
Share on other sites

Ah, thanks for the demo. Very helpful. There was a minor problem in TweenLite and one in GSDevTools. Both should be fixed now and you can preview the next release at: 


TweenMax: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

GSDevTools (codepen.io only): https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools.min.js



  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Sorry for late response. I didnt test it in CodePen. My local environment is to complex to be transfered to codepen, hence I wait until I can get the update from your business green package. How does that work with GreenSock? YOu applied a bugfix as far as I understood you. When do you turn beta into live and how do members get message about? Is there a link which describes that? Once I have the live file, I will import to my local and test it. Then I can give feedback on it.

Link to comment
Share on other sites

Hi Juno,

We did our best to fix your issue the day you reported it. It would be of a great help in the future if you could confirm that our fixes for the issue you reported are satisfactory in the beta as it will greatly speed up the official release. 


If you need a beta version that works outside of CodePen we would gladly provide that for you to help test. No worries, though. We're confident we got it sorted.


We sent out an email last week announcing the 2.0.0 release and announced it on twitter and facebook. Be sure you are subscribed to our newsletter. We try to limit the amount of email we send so following on social media is really good for minor updates and news (check the social links in the footer).


You have access to GSAP 2.0.1 from your account dashboard or anywhere you see the "download GSAP" button on the site.

  • Like 1
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.