title: GSAP with react TweenMax giving error
body: <p>I am trying to use GSAP with Scroll-magic inside a react component. My code is below</p>
  
  <pre><code>  import React, { Component } from 'react';
    import TopNavigation from '../pages/TopNavigation';
    import Footer from '../pages/footer';
    import $ from 'jquery';
    import ScrollMagic from 'scrollmagic';
    import {TweenMax} from 'gsap';
     import ReactDOM from 'react-dom';
  
   class About extends Component {
  
  componentDidMount() {
             var $this = $(ReactDOM.findDOMNode(this));
  
      this.handleLoad(this);
    }
  
    handleLoad(x) {
      $(document).ready(function(){
  
          var el1= $('#Menu');
          console.log(el1);
        var controller = new ScrollMagic.Controller();
        var tween = TweenMax.to(el1, 0.5, {css:{opacity:0, top: -200}});
          /*
          var tween2 = Tween.to(".title-landing", 0.5, {scale:0});
          var tween3 = Tween.to(".top-nav-containerwrap", 0.4, {opacity:1});
  
  
          var scene1 = new ScrollMagic.Scene({
                triggerElement:"#fullwidthbg", //Selector or DOM object that defines the start of the scene
                triggerHook: 'onLeave', //sets the position of trigger hook w.r.t viewport
                duration:0, //The duration(in pixels) for which the element will remain sticky
                offset: 10 //Offset Value for the Trigger hook position
            })
            .setTween(tween);
             controller.addScene([
            scene1,
  
            ]);
  
            */
  
  
        });
     }
   render() {
  
  
  return (
      &lt;div id="Contact"&gt;
   &lt;TopNavigation /&gt;
      Then rest of my code 
      where i have defined the elements that  i want to animate
  </code></pre>
  
  <p>It throws an error  </p>
  
  <blockquote>
    <p>"TypeError: Cannot read property 'to' of undefined"</p>
  </blockquote>
  
  <p>pointing to line</p>
  
  <pre><code>var tween = TweenMax.to(el1, 0.5, {css:{opacity:0, top: -200}});
  </code></pre>
  
  <p>If you look at my code I have <code>console.log(el1)</code> to check if its getting the element and i am able to get the element details in the console </p>
  
  <p>if I block this code the page runs smoothly.</p>
  
  <p>Any idea what I am doing wrong? </p>
  
  <p>Thanks</p>