wip: add first demo

.eslintrc

@@ -21,7 +21,6 @@
     "comma-dangle": [0],
     "curly": [0],
     "strict": [0],
-    "no-use-before-define": [2, "nofunc"],
-    "babel/new-cap": [1]
+    "no-use-before-define": [2, "nofunc"]
   }
 }

README.md

@@ -1,2 +1,4 @@
-# react-gsap-hoc
-A higher order component for applying GSAP animations to React components - draft
+# react-gsap-enhancer
+A React comonent enhancer for applying GSAP animations to React components
+
+###[Work in progress (demo)](http://azazdeaz.github.io/react-gsap-enhancer/#/demo)

demo/src/App.jsx

@@ -2,15 +2,24 @@ import React from 'react'
 import {RouteHandler} from 'react-router'
 import demoSources from './demoSources'
 import map from 'lodash/collection/map'
+import findIndex from 'lodash/array/findIndex'
+import startCase from 'lodash/string/startCase'
 
-import {AppBar, Styles,IconButton, MenuItem, LeftNav, Menu} from 'material-ui'
+import {AppBar, Styles, IconButton, DropDownMenu, MenuItem} from 'material-ui'
 var theme = new Styles.ThemeManager()
 theme.setTheme(theme.types.DARK)
-console.log({demoSources})
+
+theme.setComponentThemes({
+  appBar: {
+    color: '#121212',
+    // textColor: '#88ce02',
+  }
+})
+
 var menuItems = [
-  { type: MenuItem.Types.SUBHEADER, text: 'Demos' },
+  { type: MenuItem.Types.SUBHEADER, text: 'Demos:' },
   ...map(demoSources, (source, name) => {
-    return { route: '/demo/' + name, text: name }
+    return { route: '/demo/' + name, text: startCase(name), name }
   })
 ]
 
@@ -34,24 +43,32 @@ export default class App extends React.Component {
   }
 
   handleNavChange = (e, idx, payload) => {
-    this.context.router.transitionTo(payload.route);
+    this.context.router.transitionTo(payload.route)
+  }
+
+  handleClickGithub = () => {
+    window.open('https://github.com/azazdeaz/react-gsap-enhancer')
   }
 
   render () {
     return (
       <div>
         <AppBar
-          title="GSAP-HoC"
+          title="Demos for react-gsap-enhancer"
           iconElementLeft={
             <IconButton
-              iconClassName='fa fa-paw'
-              onClick={this.showNav}/>
-          }/>
-        <div style={{display: 'flex'}}>
-          <LeftNav ref="leftNav"
+              iconClassName='fa fa-github'
+              onClick={this.handleClickGithub}/>
+          }>
+          <DropDownMenu
+            selectedIndex = {findIndex(menuItems, item => {
+              var {name} = this.context.router.getCurrentParams()
+              return item.name === name
+            })}
             onChange = {this.handleNavChange}
-            docked = {false}
             menuItems = {menuItems} />
+        </AppBar>
+        <div style={{display: 'flex'}}>
           <RouteHandler/>
         </div>
       </div>

demo/src/Demo.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import GreenSock from 'react-gsap-hoc'
+import gsap from 'react-gsap-enhancer'
 import Playground from 'component-playground'
 import demoSources from './demoSources'
 
@@ -9,6 +9,6 @@ export default class Demo extends React.Component {
       noRender = {false}
       es6Console = {false}
       codeText = {demoSources[this.props.params.name]}
-      scope = {{React, GreenSock}}/>
+      scope = {{React, gsap, GS_GREEN: '#88ce02'}}/>
   }
 }

demo/src/demoSources/index.js

@@ -1,3 +1,3 @@
 export default {
-  demo1: require('raw!./demo1.demoscript')
+  'update-and-animate-transform': require('raw!./update-and-animate-transform.demoscript')
 }

demo/src/demoSources/demo1.demoscript → demo/src/demoSources/update-and-animate-transform.demoscript

@@ -1,12 +1,16 @@
+//update transform style on every mousemove (x, y)
+//while it's also animating(y, slace, rotate)
+
 function createAnim(selectByKeyPath) {
   var box = selectByKeyPath(['box'])
 
-  return new TimelineLite({repeat: -1})
+  return new TimelineMax({repeat: -1})
     .to(box, 1, {scale: 1.23, y: '+=120'})
     .to(box, 1, {scale: 1, y: '-=120'})
+    .to(box, 1, {rotation: 90}, 1)
 }
 
-@GreenSock()
+@gsap()
 class Demo extends React.Component {
   constructor(props) {
     super(props)
@@ -21,20 +25,20 @@ class Demo extends React.Component {
       y: e.clientY - 60 - top
     }))
 
-    this.jumpAnim = this.props.createAnimation(createAnim)
+    this.jumpAnim = this.createAnimation(createAnim)
   }
 
   render () {
     var {x, y} = this.state
-    console.log({x, y})
+
     var style = {
-      backgroundColor: '#88ce02',
+      backgroundColor: GS_GREEN,
       width: 123,
       height: 123,
       transform: `translate(${x}px, ${y}px)`
     }
 
-    return <div key='path' style={style}/>
+    return <div key='box' style={style}/>
   }
 }
 

demo/src/index.html

@@ -13,7 +13,7 @@
 
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.js"></script>
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/mode/javascript/javascript.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TimelineMax.min.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
 
     <style>

demo/src/index.jsx

@@ -5,7 +5,7 @@ import injectTapEventPlugin from 'react-tap-event-plugin'
 injectTapEventPlugin()
 
 import React from 'react'
-import Router, {Route} from 'react-router'
+import Router, {Route, Redirect} from 'react-router'
 import App from './App'
 import About from './About'
 import Demo from './Demo'
@@ -15,6 +15,7 @@ var routes = (
   <Route handler={App}>
     <Route path="about" handler={About}/>
     <Route path="demo/:name" handler={Demo}/>
+    <Redirect from='*' to='/demo/update-and-animate-transform' />
   </Route>
 )
 

demo/webpack.config.js

@@ -12,7 +12,7 @@ module.exports = {
     packageMains: ['main'],
     extensions: ['', '.js', '.jsx'],
     alias: {
-      'react-gsap-hoc': path.join(__dirname, '../src/gsap-hoc.js'),
+      'react-gsap-enhancer': path.join(__dirname, '../src/gsap-enhancer.js'),
     }
   },
   module: {

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "react-gsap-hoc",
+  "name": "react-gsap-enhancer",
   "version": "0.0.0",
   "description": "A higher order component for applying GSAP animations to React components - draft",
-  "main": "gsap-hoc.js",
+  "main": "gsap-enhancer.js",
   "directories": {
     "example": "examples"
   },
@@ -11,14 +11,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/azazdeaz/react-gsap-hoc.git"
+    "url": "https://github.com/azazdeaz/react-gsap-enhancer.git"
   },
   "author": "",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/azazdeaz/react-gsap-hoc/issues"
+    "url": "https://github.com/azazdeaz/react-gsap-enhancer/issues"
   },
-  "homepage": "https://github.com/azazdeaz/react-gsap-hoc",
+  "homepage": "https://github.com/azazdeaz/react-gsap-enhancer",
   "devDependencies": {
     "babel": "^5.6.14",
     "babel-core": "^5.6.17",

src/Animation.js

@@ -1,7 +1,7 @@
 export default class Animation {
-  constructor(createGSAPAnimation, keyTree) {
-    this._createAnimation = createAnimation
-    this._keyTree = keyTree
+  constructor(createGSAPAnimation, options, getDOMNodeByKeys) {
+    this._createGSAPAnimation = createGSAPAnimation
+    this._getDOMNodeByKeys = getDOMNodeByKeys
     this._time = undefined
   }
 
@@ -13,28 +13,21 @@ export default class Animation {
   }
 
   attach() {
-    this._gsapAnimation = this._createGSAPAnimation(this.getDOMNodeByKeys)
+    this._gsapAnimation = this._createGSAPAnimation(this._getDOMNodeByKeys)
     if (this._time !== undefined) {
       this._gsapAnimation.time(this._time)
     }
   }
-  // 
-  // refreshTimeilne() {
-  //   var oldTimeline = this.timeline
-  //   this.timeline = this._createTimeline(this.getDOMNodeByKeys)
-  //
-  //   if (oldTimeline) {
-  //     this.timeline.time(oldTimeline.time())
-  //   }
-  // }
-
-  getDOMNodeByKeys = (keyPath) => {
-    var item = {children: this._keyTree}
+}
 
-    keyPath.forEach(key => {
-      item = item.children.get(key)
-    })
+// (() => {
+//   ['play'].forEach(fnName => {
+//     Animation.prototype[fnName] = function (...args) {
+//       this._gsapAnimation[fnName](...args)
+//     }
+//   })
+// })()
 
-    return item.node
-  }
-}
+// Animation.prototype.play = function (...args) {
+//   this._gsapAnimation.play(...args)
+// }

src/gsap-enhancer.js

@@ -0,0 +1,93 @@
+import attachRefs from './attachRefs'
+import Animation from './Animation'
+
+export default function () {
+  return function (EnhancedCompoent) {
+    return class GSAPEnhancer extends EnhancedCompoent {
+      constructor(props) {
+        super(props)
+        this.__itemTree = new Map()
+        this.__runningAnimations = new Set()
+      }
+
+      createAnimation = (create, options) => {
+        var animation = new Animation(
+          create,
+          options,
+          getDOMNodeByKeys.bind(this)
+        )
+        this.__runningAnimations.add(animation)
+        animation.attach()
+        return animation
+      }
+
+      componentDidMount() {
+        saveRenderedStyles.call(this)
+
+        if (super.componentDidMount) {
+          super.componentDidMount()
+        }
+      }
+
+      componentWillUpdate() {
+        this.__runningAnimations.forEach(animation => animation.detach())
+        restoreRenderedStyles.call(this)
+
+        if (super.componentWillUpdate) {
+          super.componentWillUpdate()
+        }
+      }
+
+      render () {
+        return attachRefs(super.render(), this.__itemTree)
+      }
+
+      componentDidUpdate() {
+        saveRenderedStyles.call(this)
+        this.__runningAnimations.forEach(animation => animation.attach())
+
+        if (super.componentDidUpdate) {
+          super.componentDidUpdate()
+        }
+      }
+    }
+  }
+}
+
+function getDOMNodeByKeys(keyPath) {
+  var item = {children: this.__itemTree}
+
+  keyPath.forEach(key => {
+    item = item.children.get(key)
+  })
+
+  return item.node
+}
+
+function saveRenderedStyles() {
+  walkItemTree.call(this, item => {
+    item.savedStyle = item.node.getAttribute('style')
+    item.node._gsTransform = null
+    item.node._gsTweenID = null
+  })
+}
+
+function restoreRenderedStyles() {
+  walkItemTree.call(this, item => {
+    item.node.setAttribute('style', item.savedStyle)
+  })
+}
+
+function walkItemTree(callback) {
+  function walk(map) {
+    map.forEach(item => {
+      if (item.node) {
+        callback(item)
+        if (item.children) {
+          walk(item.children)
+        }
+      }
+    })
+  }
+  walk(this.__itemTree)
+}