Tween mixin

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 <div style={{width: this.state.width}}>Hello World!</div>
+    }
+});
+```
+
+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 <div style={{width: this.state.width}}>Hello World!</div>
     }

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