gsap-then

gsap-then

Make every GSAP Tween a promise

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.

Related

• GSAP: GreenSock Animation Platform, duh!

License

MIT © Federico Brigante

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