Question

尝试在Gatsby网站中创建动画时，出现以下错误：

12:57:12:665 (ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js

我发现资源引用了将插件添加到gatsby-config.js中，也就是gatsby-browser.js，但不知道如何编写插件添加。

当前的gatsby.config.js：

module.exports = {
   siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: ['gatsby-plugin-react-helmet', 'gatsby-plugin-emotion'],
}

当前的gatsby-browser.js：

/* eslint-disable react/prop-types */
import 'babel-polyfill'
import React, { createElement } from 'react'

exports.onClientEntry = () => {
  require('gsap')
  require('scrollmagic')
  require('gsap/src/uncompressed/plugins/ScrollToPlugin')
  require('jquery')
}

如何引入animation.gsap插件？

我的动画组件：

import React, { Component } from 'react'
import Link from 'gatsby-link'
import styled from 'react-emotion'
import { TweenLite as Tween, TimelineMax as Timeline, TweenMax } from 'gsap'
import { Images } from '../../assets'
import '../../styles/main.css'
import $ from 'jquery'
import ScrollMagic from 'scrollmagic'

const Container = styled.div`
  height: 100vh;
  margin: auto;
  position: absolute;
  top: 30%;
  z-index: 999;
`

export default class Animation extends React.Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    const flightpath = {
      entry: {
        curviness: 1.25,
        autoRotate: true,
        values: [{ x: 100, y: -20 }, { x: 300, y: 10 }, {}],
      },
      looping: {
        curviness: 1.25,
        autoRotate: true,
        values: [
          { x: 510, y: 60 },
          { x: 620, y: -60 },
          { x: 500, y: -100 },
          { x: 380, y: 20 },
          { x: 500, y: 60 },
          { x: 580, y: 20 },
          { x: 620, y: 15 },
        ],
      },
      leave: {
        curviness: 1.25,
        autoRotate: true,
        values: [
          { x: 660, y: 20 },
          { x: 800, y: 130 },
          { x: $(window).width() + 300, y: -100 },
        ],
      },
    }

    //init controller
    const controller = new ScrollMagic.Controller()

    //create tween
    const tween = new Timeline()
      .add(
        TweenMax.to($('#plane'), 1.2, {
          css: { bezier: flightpath.entry },
          ease: Power1.easeInOut,
        })
      )
      .add(
        TweenMax.to($('#plane'), 2, {
          css: { bezier: flightpath.looping },
          ease: Power1.easeInOut,
        })
      )
      .add(
        TweenMax.to($('#plane'), 1, {
          css: { bezier: flightpath.leave },
          ease: Power1.easeInOut,
        })
      )

    // build scene
    const scene = new ScrollMagic.Scene({
      triggerElement: '#trigger',
      duration: 500,
      offset: 100,
    })
      .setPin('#target')
      .setTween(tween)
      .addTo(controller)
  }

  render() {
    return (
      <Container>
        <div className="spacer s2" />
        <div className="spacer s0" id="trigger" />
        <div id="target">
          <img id="plane" src={Images.pou} />
        </div>
        <div className="spacer s2" />
      </Container>
    )
  }
}

Answer 1

我已通过以下方式将gsap（greensock）成功添加到gats的我的react组件中。

npm install gsap --save

然后在react组件内部

import React, { Component } from 'react';
import {TweenMax} from 'gsap';

export default class MyAnimation extends Component {
  componentDidMount() {
    TweenMax.set(this.myObject, { transformOrigin: '50% 50%' });
  }
  render() {
    return (
      <div>
        <div id="myObject"></div>
      </div>
    )
  }
}

Answer 2

问题在于animation.gsap没有ES6导出。

我最终复制了所有代码并将其包装在导出文件中。 debug.addIndicators.js也是如此。

您可以在这里看到它：

https://github.com/bitworking/react-scrollmagic/blob/master/src/animation.gsap.js

https://github.com/bitworking/react-scrollmagic/blob/master/src/debug.addIndicators.js

然后导入并运行它：

    <script type="text/javascript">var imp_accountInfo = {
          "id": "6yb32e53e03g4",
          "nickname": "jack"
    };</script>

或者您可以将以下软件包用于React：

ScrollMagic + GSAP https://github.com/bitworking/react-scrollmagic

仅GSAP： https://github.com/bitworking/react-gsap

Answer 3

为我工作：在根文件夹cp .cache/default-html.js src/html.js中使用命令然后在src / html.js中，在正文标签末尾之前添加链接和代码：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TimelineLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/CSSPlugin.min.js"></script>


    <script
    dangerouslySetInnerHTML = {
      {
        __html: `
        window.onscroll = function () {
          var logo = document.querySelectorAll(".logo");
            TweenLite.from(logo, 2, {
              opacity: 1,
              left: "300px",
              color: "#fff"
            });
        }
    `,
      }
    }
    />

Docs

Answer 4

问题有点过时了，但是无论如何，我可以将当前的解决方案留作参考。检出此插件scrollmagic-plugin-gsap。正如文档中提到的，animation.gsap.js与ES6模块不兼容。

import ScrollMagic from "scrollmagic";
import gsap from "gsap";
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";

ScrollMagicPluginGsap(ScrollMagic, gsap);

const MyComponent = () => {
  //...
}

使用Greensock（gsap）与Gatsby反应静态网站错误animation.gsap

4 个答案: