diff --git a/README.md b/README.md index ca5cebe..87f9f0e 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,33 @@ React.createClass({ componentDidMount: function() { TweenLite.to(this, 1, {state: {width: 100}}); }, + componentWillUnmount: function() { + TweenLite.killTweensOf(this); + }, + render: function() { + return
Hello World!
+ } +}); +``` + +Because React doesn't allow you to change the state of unmounted components, you +need to take care to kill any active tweens before your component is unmounted. +To reduce boilerplate, a mixin is provided for this. It also exposes convenience +methods `tweenTo`, `tweenFrom`, and `tweenFromTo` which behave like their +TweenLite equivalents but allow you to omit the first (target) argument: + +```javascript +// Get the mixin using CJS, AMD, or from window. +var TweenMixin = require('gsap-react-plugin').TweenMixin; + +React.createClass({ + mixins: [TweenMixin], + getInitialState: function() { + return {width: 0}; + }, + componentDidMount: function() { + this.tweenTo(1, {state: {width: 100}}); + }, render: function() { return
Hello World!
} diff --git a/src/gsap-react-plugin.coffee b/src/gsap-react-plugin.coffee index e70fb12..a84238f 100644 --- a/src/gsap-react-plugin.coffee +++ b/src/gsap-react-plugin.coffee @@ -52,3 +52,31 @@ window._gsQueue.push -> @_target.setState @_tween if window._gsDefine then window._gsQueue.pop()() + +globals = -> (window.GreenSockGlobals || window) +getTweenClass = -> + {TweenMax, TweenLite} = globals() + TweenMax or TweenLite +getTimelineClass = -> + {TimelineMax, TimelineLite} = globals() + TimelineMax or TimelineLite + +mod = + TweenMixin: + createTimeline: (args...) -> + cls = getTimelineClass() + new cls args... + createTween: (args...) -> + cls = getTweenClass() + new cls args... + tweenTo: (args...) -> getTweenClass().to this, args...; this + tweenFrom: (args...) -> getTweenClass().from this, args...; this + tweenFromTo: (args...) -> getTweenClass().fromTo this, args...; this + componentWillUnmount: -> getTweenClass().killTweensOf this; this + +if typeof define is 'function' and define.amd + define => @gsapReactPlugin = mod +else if typeof module is 'object' and module.exports + module.exports = mod +else + @gsapReactPlugin = mod