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 totl
seekBackwardDuration
is the number of seconds you want to jump back, and defaults to0.1
seekForwardDuration
is the number of seconds you want to jump forward, and defaults to0.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