GreenSock Animation Tools

Helpful tools that make animating with GreenSock just a little bit easier.

Demo

…or, you can try it yourself on this simple animation.

How to Implement

The order of things is important:

GreenSock's platform file(s); learn more here
Your animation's script; example: <script src="/path/to/animations.js"></script>
This animation tools' script; example: <script src="/path/to/gs-animation-tools.js"></script>
Call the animation tools and pass optional parameters as needed; example: <script>_gsAnimationTools(tlMaster, 0.15, 0.15);</script>

You can see this order in use in the demo's index.html file.

Parameters

_gsAnimationTools(timelineName, seekBackwardDuration, seekForwardDuration); where…

timelineName is the name of your primary timeline, and defaults to tl
seekBackwardDuration is the number of seconds you want to jump back, and defaults to 0.1
seekForwardDuration is the number of seconds you want to jump forward, and defaults to 0.1

…and can be seen in the demo's index.html file, like so: _gsAnimationTools(tlMaster, 0.15, 0.15);

Keyboard Shortcuts

Spacebar will toggle between play and pause
← will seek back by the value you've defined above, or by 0.1 seconds if left undefined
→ will seek forward by the value you've defined above, or by 0.1 seconds if left undefined
esc will restart the animation from it's beginning