Skip to content

Remove bluebird as dependency and make it modular #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 17 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 71 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,44 +1,92 @@
# gsap-promise
# gsap-lite-promise

[![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges)

A Promise wrapper around gsap / tweenlite.
A Promise wrapper around gsap, based on the npm package gsap-promise created by Matt DesLauriers that use TweenMax.

```js
var animate = require('gsap-promise')

Promise.all([
animate(element, 1.0, { x: 10 }),
animate(element, 1.0, { y: 10, delay: 0.5 })
]).then(function() {
console.log("all animations finished")
})
require('gsap/src/minified/TweenLite.min.js');
const animate = require('gsap-lite-promise')(Promise, TweenLite);

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

```
const litePromise = require('gsap-lite-promise');
const animate = litePromise(Promise, TweenModule);
```

### First Argument - Promise

Select your favorite Promise framework and send it as an argument.

### 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-lite-promise')(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
})
)
);
};
```

## Changelog

_2.0.0_
Was removed Bluebird like strict dependency so in order to use it you should pass your prefer Promise implementation to the lib.

## Usage

[![NPM](https://nodei.co/npm/gsap-promise.png)](https://nodei.co/npm/gsap-promise/)
[![NPM](https://nodei.co/npm/gsap-lite-promise.png)](https://nodei.co/npm/gsap-lite-promise/)

This promisifies the `TweenLite` methods: `to`, `from`, `set` and `fromTo`.

#### `animate.to(element, duration, params)`

This promisifies the `TweenMax` methods: `to`, `from`, `set` and `fromTo`. This uses Bluebird, and has basic support for cancellation.
#### `animate.from(element, duration, from)`

#### ```animate.to(element, duration, params)```
#### ```animate.from(element, duration, from)```
#### ```animate.set(element, params)```
#### ```animate.fromTo(element, duration, from, to)```
#### ```animate.staggerFromTo(element, duration, from, to, stagger)```
#### ```animate.staggerFrom(element, duration, from, stagger)```
#### ```animate.staggerTo(element, duration, to, stagger)```
#### `animate.set(element, params)`

Matches the TweenMax methods by the same name, but returns a Promise for the onComplete event.
#### `animate.fromTo(element, duration, from, to)`

#### ```animate.all(element)```
Matches the TweenLite 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)```
#### `animate(element, duration, params)`

The default export is the same as `animate.to`.

## Add extras

If you want to use the greensock easing for example or the CSSPlugin to animate CSS properties, you can add those separately, the goal of this is being the lightest posible.

```
require('gsap/src/uncompressed/easing/EasePack');
require('gsap/src/uncompressed/plugins/CSSPlugin');
```

## License

MIT, see [LICENSE.md](http://github.com/mattdesl/gsap-promise/blob/master/LICENSE.md) for details.
MIT, see [LICENSE.md](http://github.com/iranreyes/gsap-lite-promise/blob/master/LICENSE.md) for details.
74 changes: 0 additions & 74 deletions base.js

This file was deleted.

47 changes: 46 additions & 1 deletion index.js
Original file line number Diff line number Diff line change
@@ -1 +1,46 @@
module.exports = require('./base')(require('bluebird'))
var assign = require('object-assign');

module.exports = function(Promise, TweenModule) {
function animateFunc(func, element, duration, opts) {
opts = assign({}, opts);
var tween;
return new Promise(function(resolve, reject, onCancel) {
opts.onComplete = resolve;
tween = func(element, duration, opts);
onCancel &&
onCancel(function() {
tween.kill();
});
});
}

var animateTo = animateFunc.bind(null, TweenModule.to);

var util = animateTo;
util.to = animateTo;
util.from = animateFunc.bind(null, TweenModule.from);

util.set = function animateSet(element, params) {
params = assign({}, params);
return new Promise(function(resolve, reject) {
params.onComplete = resolve;
TweenModule.set(element, params);
});
};

util.fromTo = function animateFromTo(element, duration, from, to) {
to = assign({}, to);
var tween;
return new Promise(function(resolve, reject, onCancel) {
to.onComplete = resolve;
tween = TweenModule.fromTo(element, duration, from, to);
onCancel &&
onCancel(function() {
tween.kill();
});
});
};

util.all = Promise.all;
return util;
};
Loading