Skip to content

Latest commit

 

History

History
154 lines (127 loc) · 4.58 KB

TweenPromise.md

File metadata and controls

154 lines (127 loc) · 4.58 KB
Raw

TweenPromise

Kind: global class
Npmpackage:

new TweenPromise()

This module is a simple wrapper for TweenLite to return a Promise rather than using onComplete and onCompleteParams; instead use .then() with thenParams as an optional parameter in the vars object. The .then() will have a Array passed through it:
.then(args => { ... })

0 The tween object giving access to all properties from TweenLite.
NOTE: The object is not bound as this as this is not possible with Promise.then()
1 The arguments Array set by thenParams

NOTE: onComplete and onCompleteParams still work in tandem with .then()
Import from ad-animation

Example

import { TweenPromise } from 'ad-animation'

// simple example to fade out and hide a dom element
TweenPromise.to(myComponent, 1, {
	alpha: 0
}).then(args => {
	// do stuff here post tween, like hide the element
	myComponent.hide()
	// OR
	// get the tween object and any optional params passed back
	const [tween, params] = args
	// and get the target from the tween object
	tween.target.hide()
})

// a complex example with multiple dom elements stored in an array
const elems = [div, div, div, div]
const promisePool = elems.map(elem => {
	return TweenPromise.to(elem, Math.random(), {
		rotation: 360,
		scale: 0.5,
		delay: Math.random()
	})
})
// when all are done, proceed to next animation for all
Promise.all(promisePool).then(() => {
	TweenLite.to(elems, 2, {
		scale: 1,
		ease: Sine.easeInOut
	})
})

// declare tween in one location, such as in a class
class MyComponent {
	.....
	play() {
		return TweenPromise.from(this, 1, {
			x: 10,
			ease: Circ.easeOut,
			thenParams: [true]
		})
	}
}

const myComponent = new MyComponent()
myComponent.play().then(args => {
	// get the tween object and any optional params passed back
	const [tween, params] = args
	const isSomething = params[0] // true passed from thenParams in class
	// do stuff after animation
})

TweenPromise.to(target, time, vars) ⇒ Promise

Wrapper for TweenLite.to, using the same arguments.

Kind: static method of TweenPromise
Returns: Promise - fulfilled when the tween is complete

Param Description
target The element to animate
time The time on the tween
vars All options {@see greensock}

Properties

Name Description
thenParams Optional property of the vars object: values to be passed through .then() as an Array.

TweenPromise.from(target, time, vars) ⇒ Promise

Wrapper for TweenLite.from, using the same arguments.

Kind: static method of TweenPromise
Returns: Promise - fulfilled when the tween is complete

Param Description
target The element to animate
time The time on the tween
vars All options {@see greensock}

Properties

Name Description
thenParams Optional property of the vars object: values to be passed through .then() as an Array.

TweenPromise.fromTo(target, time, fromVars, toVars) ⇒ Promise

Wrapper for TweenLite.fromTo, using the same arguments.

Kind: static method of TweenPromise
Returns: Promise - fulfilled when the tween is complete

Param Description
target The element to animate
time The time on the tween
fromVars All options {@see greensock}
toVars All options {@see greensock}

Properties

Name Description
thenParams Optional property of the toVars object: values to be passed through .then() as an Array.