fromtheoutfit / gs-animation-tools

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

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

gs-animation-tools's Issues

Can't see tools when document is taller than viewport.

When the document is taller than the viewport, the absolute position of the tools' container pushes them out of view. Swap to viewport height related positioning.