GSAP с реакцией TweenMax дает ошибку

Question

Я пытаюсь использовать GSAP со Scroll-magic внутри реактивного компонента. Мой код ниже

  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 (
    <div id="Contact">
 <TopNavigation />
    Then rest of my code 
    where i have defined the elements that  i want to animate

Выдает ошибку

"TypeError: Невозможно прочитать свойство" to "из undefined"

указывая на линию

var tween = TweenMax.to(el1, 0.5, {css:{opacity:0, top: -200}});

Если вы посмотрите на мой код, у меня есть console.log(el1) чтобы проверить, получает ли он элемент, и я могу получить детали элемента в консоли

если я заблокирую этот код, страница будет работать гладко.

Есть идеи, что я делаю не так?

Спасибо

Answer 1

Я была такая же проблема. Потратил кучу времени, чтобы найти решение, которое работает для меня.

Используйте CDN вместо модуля узла - включите в ваш index.html в общей папке проекта:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js" async="false"></script>

Не требует импорта в реагирующий компонент. Используйте как:

 window.TweenMax.to(el1, 0.5, {css:{opacity:0, top: -200}});