Question

我正在尝试在反应组件中使用带有Scroll-magic的GSAP。我的代码在

之下

  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

它会抛出错误

＆＃34; TypeError：无法读取属性＆＃39;到＆＃39;未定义＆＃34;

指向行

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}});

GSAP与反应TweenMax给出错误

1 个答案: