title: TweenMax won't initialize correctly: "Uncaught Cannot tween a null target."
body: <p>In my app, I'm trying to use the <a href="http://greensock.com/tweenmax" rel="noreferrer">TweenMax/TimelineMax libraries of GSAP</a> to animate changes, but I'm running into a early error in my code. Simplified (this is a React/Redux app using ES6):</p>
  
  <pre><code>import TimelineMax from 'gsap';
  import TweenMax from 'gsap';
  import GSAP from 'gsap-react-plugin';
  import ReactDOM from 'react-dom';
  
  someFunction() {
      var mailboxDropdown = ReactDOM.findDOMNode( this.refs.mailboxDropdown );
      // TweenLite.to(this, 0.1, { "y-offset": '-50px', 'opacity' : 0 });
      console.log(mailboxDropdown)
      var tl = new TimelineMax();
      console.log('here');
      tl.to(mailboxDropdown, 0.4, { "y-offset": '-50px' }, 'slideUp' )
      tl.to(mailboxDropdown, 1, { opacity: 0 }, 'slideUp-=.5');
  };
  </code></pre>
  
  <p>The errors are weird. Firstly, if I don't initialize TimelineMax with an object -- something like <code>new TimelineMax({repeat: 1})</code> -- (although the docs say its default constructor arg is <code>null</code>), it throws an error before even hitting the <code>console.log('here')</code>. </p>
  
  <blockquote>
    <p>Uncaught Cannot tween a null target.</p>
  </blockquote>
  
  <p>If I <strong>do</strong> initialize it with an object as in the previous sentence, I hit an error when I try to call <code>tl.to</code>. Specifically: </p>
  
  <blockquote>
    <p>Uncaught TypeError: tl.to is not a function</p>
  </blockquote>
  
  <p>Even though <code>to</code> is <strong>definitely</strong> in the docs. The <code>tl</code> object appears to be a <code>TweenMax</code> object:</p>
  
  <blockquote>
    <p>TweenMax {vars: Object, _totalDuration: 0, _duration: 0, _delay: 0, _timeScale: 1…}</p>
  </blockquote>
  
  <p>But it isn't responding to most methods, including <code>add</code> and a bunch of others.</p>
  
  <p>Any idea what's going on here? It's super confusing to me, cause all the docs/tutorials seem to suggest that what I'm doing is fine, and all the relevant objects (<code>mailboxDropdown</code>, etc) seem correctly defined. </p>