Earlier this year we started to dip our toes into the world of complex web animation using the GreenSock Animation Platform (GSAP) and, like nearly everyone who tries GSAP, we were blown away. Its power, its flexibility, its code … it’s all so wonderful and it opens new doors for us and for our clients. It immediately became our go-to platform for the handful of projects that require some amount of non-trivial animation.

All that said, when you first start out with GSAP it can be a little tedious to control your animation during its development as there’s no UI, not by default anyway. Without a UI, determining how long your animation is and/or where you currently are on its timeline can be difficult. Similarly, there’s no simple way to pause, play, restart, or step backwards and forwards through its timeine. As a result, the very first project we did with GSAP took longer than it should have.

For our second project, we built some useful tools that can be added to any GSAP project to make the development process a little bit easier. They automatically generate two timers and small buttons at the bottom of the browser window which provide quick access to typical playback controls. They also make keyboard shortcuts available for each of the buttons.

Demo and Code

Please try the tools yourself, and check out the GitHub repo if you’d like to use the tools in your own project, or offer feedback, report bugs, etc.

Enjoy!