Jump to content


dev tools must be Christmas already!!!

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



Have used Chris Gannon's scrub timeline in the past but this is just in another league.

Gonna be so useful I've got a game to debug and am gonna use this which will be fun.



  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Awesome! Thanks for letting us know. We're confident GSDevTools should really really really speed up development and make debugging and client reviews so much easier.

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

Just curious and this would help alot but is there anyway to add it after the fact via console? That way it didn't need to be included in the actual file but could be referenced later. My team builds alot of banners and this would help during reviews.


    var jq = document.createElement('script');
    jq.src = "/GSDevTools.min.js"; /// some server site for my team only
    jq.onload = function(){


Link to comment
Share on other sites

Hm, I haven't tried that but in theory it should work as long as you're loading it quickly enough. It really needs to be in place on the first tick so that it can hijack the root timeline and "record" things properly. It basically records any animations that are created within the first 2 seconds of the page loading. 


Let us know if you run into any trouble. 

  • Thanks 1
Link to comment
Share on other sites

That might explain why it wasn’t working for me. It would load the interface and show in the DOM but nothing worked. All buttons did nothing. I believe as you mentioned it wouldn’t be soon enough and capture the timeline. Bummer but thank you. It was worth asking.

Link to comment
Share on other sites

Another issue, outside of this one would be iframes that load a child container. It would be nice to pass in the timeline object as one of the optional parms of GSdevtools. It's not always practical to have this ready to go right after the timeline loads.

Link to comment
Share on other sites

Oh, absolutely. If I understand you correctly, you can already do that. Simply define it as the "animation", like:

var tl = new TimelineLite();

    animation: tl,
    globalSync: false


Is that what you mean? 


GSDevTools doesn't need to be just wired up to the root/global timeline at all. You can point it at any animation (tween, timeline, whatever). Does that help?

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