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:

1. GreenSock's platform file(s); learn more here
2. Your animation's script; example: <script src="/path/to/animations.js"></script>
3. This animation tools' script; example: <script src="/path/to/gs-animation-tools.js"></script>
4. 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