Jump to content

GreenSock Docs (HTML5/JS)


GSDevTools gives you a visual UI for interacting with and debugging GSAP animations, complete with advanced playback controls, keyboard shortcuts, global synchronization and more. Jump to specific scenes, set in/out points, play in slow motion to reveal intricate details, and even switch to a "minimal" mode on small screens. GSDevTools makes building and reviewing GSAP animations simply delightful.

Get Started

  1. Load the JavaScript file 
    //be sure to use a path that works in your dev environment
    <script src="js/gsap/GSDevTools.min.js"></script>
  2. Create a GSDevTools instance 
That's it!  The demo below shows GSDevTools running with its default settings. It automatically gives you control over every animation on the global timeline. 

Select an animation by id

 Any GSAP animation (tween or timeline) can be assigned an id (a string) which causes it to show up in the animation menu. That makes it easy to jump to any scene.  Notice how the timeline and each tween below have an id assigned:   
//give the timeline and child tweens their own id. 
var tl = new TimelineLite({id: "timeline"}) 
tl.to(".orange", 1, {x: 700, id: "orange"}) 
  .to(".green", 2, {x: 700, ease: Bounce.easeOut, id: "green"}); 

//give this tween an id TweenLite.to(".grey", 1, {x: 700, rotation: 360, delay:3, id:"grey"})
//instantiate GSDevTools with default settings 
 Now each id shows up in the animations menu (lower left). 

Persistence between refreshes

 For added convenience, when you manually set the in/out points, animation, timeScale, or looping state in the UI, they persist between refreshes! This means you can drag the in/out points to isolate a particular section and then tweak the code, hit refresh, and see the changes immediately within that cropped area. Any values set in the GSDevTools.create({...}) method will override manual selections. Set persist: false to disable persistence. If you encounter persistence contamination (e.g. setting timeScale in one affects another), simply assign a unique id to the GSDevTools instance (the recorded values are segregated by id, session, and domain). 

Configuration options

 GSDevTools can be configured extensively. Optionally define any of these properties in the config object:

Keyboard Controls

  • SPACEBAR: play/pause
  • UP/DOWN ARROWS: increase/decrease timeScale
  • LEFT ARROW: rewind
  • RIGHT ARROW: jump to end
  • L: toggle loop
  • I: set the in point to current position of playhead
  • O: set the out point to current position of playhead
  • H: hide/show toggle

Tips and tricks

  • Clicking the GreenSock logo (bottom right) gets you right to the GreenSock docs!
  • Double-click on the in/out marker(s) to reset them both immediately.
  • If the playback UI is obscuring part of your animation, just tap the "H" key to hide it (and again to bring it back) - you can still use all the keyboard shortcuts even when it's invisible.

Advanced demos

 We purposefully chose very basic animations for the demos above, but here are a few that illustrate how easy GSDevTools makes it to control and debug even super-complex animation sequences. 


GSDevTools requires TweenMax (well, actually just CSSPlugin, TweenLite, TimelineLite, AttrPlugin which are all included in TweenMax) version 1.20.3 or higher. It also uses Draggable under the hood, but in order to minimize hassle for end users, Draggable is included inside the GSDevTools file itself. Also, GSDevTools doesn't work with animations that have useFrames:true (that feature is rarely used and will likely be dropped in the next major GSAP release in order to streamline things).   

How do I get it?

GSDevTools is available to Club GreenSock members ("Shockingly Green" and above). Just download GSAP with the bonus files zip from your Dashboard. Try GSDevTools for free on CodePen. 


  • Why is my Global Timeline 1000 seconds long? That means you've probably got an infinitely repeating animation somewhere. GSDevTools caps its duration at 1000 seconds. Scrubbing to Infinity is awkward.
  • Does loading GSDevTools impact runtime performance? Since it must monitor and record the root timeline, yes, there is a slight performance hit but probably not noticeable. Keep in mind that usually you'll only load GSDevTools while you're developing/reviewing your animations and then remove it when you're ready to launch, so ultimately it shouldn't be much of a factor anyway.
  • Why isn't GSDevTools in the CDN or Github repo? Because it's a membership benefit of Club GreenSock. It's a way for us to give back to those who support our ongoing development efforts. That's why we've been able to continue innovating for over a decade. See https://greensock.com/why-license for details about our philosophy.
  • Does GSDevTools work with other animation libraries? Nope, it depends on some unique capabilities baked into the GSAP architecture.
  • What will I do with all the time this tool saves me? Take up a new hobby, ponder deep philosophical questions, make cookies - it's up to you.


create( config:object ) ;

Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.