/gsap-then

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

Primary LanguageJavaScriptMIT LicenseMIT

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.

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 (timeline) {
	console.log('Timeline completed:', timeline);
})
tl.to('.title', 1, {opacity: 0});

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.

Related

  • GSAP: GreenSock Animation Platform, duh!

License

MIT © Federico Brigante

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