GSAP HOC React

GsappedComponent.jsx

import React from 'react';
import { TimelineLite, TweenLite } from 'gsap';

const asGsapped = (WrappedComponent) => {
  return class GsappedComponent extends React.PureComponent {

    constructor(props) {
      super(props);
    }

    to = (opts, duration = 0, offset = 0) => {
      this._to(this.ref, opts, duration, offset);
    }

    fromTo = (fromOpts, toOpts, duration = 0, offset = 0) => {
      this._fromTo(this.ref, fromOpts, toOpts, duration);
    }

    _fromTo = (ref, fromOpts, toOpts, duration = 0, offset = 0) => {
      try {
        TweenLite.fromTo(ref, duration, fromOpts, toOpts, offset)
      } catch (e) {
        console.trace();
        console.log('Attempted to tween null target');
      }
    }

    _to = (ref, opts, duration = 0, offset = 0) => {
      try {
        TweenLite.to(ref, duration, opts, offset);
      } catch (e) {
        console.trace();
        console.log('Attempted to tween null target');
      }
    }

    render() {
      return <WrappedComponent
        tlTo={this.to}
        tlFromTo={this.fromTo}
        innerRef={ref => this.ref = ref}
        tlToRef={this._to}
        tlFromToRef={this._fromTo}
        {...this.props} />
    }

  }
}

export { asGsapped };