gsap-then

Make every GSAP Tween a promise

Good news! GSAP 3 supports promises natively! This module is only necessary for GSAP v1 and v2.

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') // https://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

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