Gsap-then NPM | npm.io

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)