https://github.com/iranreyes/gsap-promisify
Replace TweenMax or TweenLite callback for promises.
https://github.com/iranreyes/gsap-promisify
gsap promise promises tweenlite tweenmax
Last synced: 9 months ago
JSON representation
Replace TweenMax or TweenLite callback for promises.
- Host: GitHub
- URL: https://github.com/iranreyes/gsap-promisify
- Owner: iranreyes
- License: mit
- Created: 2018-03-18T06:14:09.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-08T14:31:41.000Z (almost 8 years ago)
- Last Synced: 2025-05-06T02:40:32.117Z (about 1 year ago)
- Topics: gsap, promise, promises, tweenlite, tweenmax
- Language: JavaScript
- Size: 88.9 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GSAP Promisify
[](http://github.com/hughsk/stability-badges)
Replace GSAP TweenMax or TweenLite callback for promises. This is an improved version of the npm package gsap-lite-promise.
This package doesn't include GSAP to decouple the hard dependency to the package versions and to improve it flexibility.
```js
require('gsap/src/uncompressed/TweenMax.js');
const animate = require('gsap-promisify')(Promise, window.TweenMax);
Promise.all([animate(element, 1.0, { x: 10 }), animate(element, 1.0, { y: 10, delay: 0.5 })]).then(function() {
console.log('all animations finished');
});
```
## Arguments
### First Argument - Promise
Select your favorite Promise framework and send it as an argument. Is recommended the use of native Promise and in its default the polyfill.
### Second Argument - TweenModule
Send TweenMax or TweenLite. Instead of work with an internal version of `gsap`, maybe different than the one you are currently using in your project, just send your version and we will promisify that gsap module.
## Example
Customizing the GSAP implementation to use the built in minified sources and adding a `staggerTo` the implementation.
```
require('gsap/src/minified/plugins/CSSPlugin.min.js');
require('gsap/src/minified/plugins/ScrollToPlugin.min.js');
require('gsap/src/minified/TweenLite.min.js');
const animate = require('gsap-promisify')(Promise, window.TweenLite);
animate.staggerTo = function(els, duration, props, delay) {
return Promise.all(
els.map((el, i) =>
animate.to(el, duration, {
...props,
delay: props.delay + delay * i
})
)
);
};
```
## Usage
[](https://nodei.co/npm/gsap-promisify/)
This promisifies the `TweenLite | TweenMax` methods: `to`, `from`, `set` and `fromTo`.
#### `animate.to(element, duration, params)`
#### `animate.from(element, duration, from)`
#### `animate.set(element, params)`
#### `animate.fromTo(element, duration, from, to)`
Matches the `TweenLite | TweenMax` methods by the same name, but returns a Promise for the onComplete event.
#### `animate.all(element)`
An alias for `Promise.all`, which will trigger all tweens in parallel.
#### `animate(element, duration, params)`
The default export is the same as `animate.to`.
## License
MIT, see [LICENSE](http://github.com/iranreyes/gsap-promisify/blob/master/LICENSE) for details.