Skip to content
Helpful tools that make animating with GreenSock just a little bit easier.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
html
README.md
demo.gif

README.md

GreenSock Animation Tools

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

Demo

Screen capture of the 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
You can’t perform that action at this time.