gt

gsap-then

🙏 Make every GSAP Tween a promise. tl.then(doSomething) (GSAP 1 and 2)

Showing:

Popularity

Downloads/wk

45

GitHub Stars

29

Maintenance

Last Commit

2yrs ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

0.4KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

gsap-then

Make every GSAP Tween a promise

gzipped size Travis build npm link

Once loaded, every GSAP tween (TweenLite, TimelineLite, TweenMax, TimelineMax) will automatically be a promise. See the usage examples to see what this enables.

Since v3.0.0 it supports await!

Install

npm install --save gsap-then
import 'gsap';
import 'gsap-then';

Or include the file dist/gsap-then.browser.js after loading GreenSock.

Usage

TweenLite.to('.title', 1, {opacity: 0}).then(function () {
    console.log('Done animating title');
})
Promise.all([
    TweenLite.to('.title', 1, {opacity: 0}),
    loadImage('img.jpg') // http://npm.im/image-promise
]).then(function () {
    console.log('Animation done and image loaded');
});
var tl = new TimelineLite();
tl.then(function () {
    console.log('Timeline completed:', tl);
})
tl.to('.title', 1, {opacity: 0});
await TweenLite.to('.title', 1, {opacity: 0});

console.log('Done animating title');

Notes

  • Calling .then() generates a new Promise.
  • The generated Promise is resolved the next time GSAP calls onComplete
  • The Promise is only resolved once, so if you restart the animation, nothing new will happen—unless you generate a new Promise.
  • If the tween already has an onComplete callback, it will be replaced by the Promise, but it will still work.
  • Don't remove or set a new onComplete callback after calling .then() because this will override the Promise (i.e. it will never be resolved)

Dependencies

  • Load gsap or simply TweenLite before gsap-then.
  • window.Promise is available in Edge 12+ and all the other browsers.
  • GSAP: GreenSock Animation Platform, duh!

License

MIT © Federico Brigante

gsap-then is NOT affiliated with, endorsed, or sponsored by GreenSock, Inc.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100