This package has been deprecated

Author message:

Use the latest version of GSAP instead

gsap-then

3.0.0 • Public • Published

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.

Related

  • GSAP: GreenSock Animation Platform, duh!

License

MIT © Federico Brigante

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

Package Sidebar

Install

npm i gsap-then

Weekly Downloads

3

Version

3.0.0

License

MIT

Unpacked Size

5.7 kB

Total Files

5

Last publish

Collaborators

  • fregante