GSAP 与反应 TweenMax 给出错误答案

【问题标题】：GSAP with react TweenMax giving errorGSAP 与反应 TweenMax 给出错误
【发布时间】：2018-03-29 06:35:06
【问题描述】：

我正在尝试在 React 组件中使用 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'”

指向线

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

如果您查看我的代码，我有 console.log(el1) 来检查它是否获取元素，并且我能够在控制台中获取元素详细信息

如果我阻止此代码，页面运行顺利。

知道我做错了什么吗？

谢谢

【问题讨论】：

很难说没有看到你的项目，但听起来你没有正确导入 TweenMax。你用的是最新版本吗？也许尝试从“gsap”导入 TweenMax（没有大括号）。您也可以尝试从“gsap/TweenMax”导入 TweenMax。我假设您正在使用 NPM，对吗？我还注意到您有一些 [注释掉] 引用 Tween.to() 的代码 - 我想知道您是否指的是 TweenMax.to()？
我已经尝试了上述但仍然是同样的错误。我认为 Gsap 没有正确导入。我正在使用 gsap 节点库。我如何检查它是否被导入并且 TweenMax 是一个可用的函数。我也在做这个 {TweenMax as Tween} 这就是为什么我在那里使用 tween 然后我评论了这些行
尝试 console.log('TWEEN MAX LOGING: ', TweenMax) 并查看输出以确保已定义
当我从 "gsap" 使用 import {TweenMax} 时，console.log(TweenMax) 给出未定义的输出，当我从 "gsap" 导入 TweenMax 时，输出是 {}
您安装了哪个版本的 TweenMax？你做过“npm install gsap”吗？您使用的是什么构建系统（或捆绑器）？并且您尝试从“gsap/TweenMax”导入 TweenMax，对吗？

标签： reactjs gsap scrollmagic

【解决方案1】：

我有同样的问题。花了很多时间找到适合我的解决方案。

使用 CDN 代替节点模块 - 包含在项目公共文件夹中的 index.html 中：

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

它不需要在 react 组件中导入。像这样使用：

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

【讨论】：

谢谢老兄！！我通过在 webpack 中使用别名解决了这个问题。正在使用 create-react-app 所以必须先弹出然后配置它现在就像一个魅力。但我当然也会尝试你的解决方案