在Gatsby react static site error animation.gsap中使用Greensock (gsap)
在Gatsby react static site error animation.gsap中使用Greensock (gsap)
提问于 2018-06-08 09:20:44
尝试在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>
)
}
}回答 4
Stack Overflow用户
发布于 2018-10-10 05:49:57
我已经通过以下方式成功地将gsap (greensock)添加到了gatsby的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>
)
}
}Stack Overflow用户
发布于 2018-10-16 03:23:41
问题是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
然后导入并运行它：
import { default as ScrollMagic } from 'scrollmagic';
import { TimelineMax as Timeline, TweenMax as Tween } from 'gsap/TweenMax';
import animationGsap from './animation.gsap.js';
import debugAddIndicators from './debug.addIndicators.js';
animationGsap(ScrollMagic, Timeline, Tween);
debugAddIndicators(ScrollMagic);或者，您可以使用以下React包：
ScrollMagic + GSAP https://github.com/bitworking/react-scrollmagic
Stack Overflow用户
发布于 2019-04-03 19:41:12
对我来说，这样做:在根文件夹cp .cache/default-html.js src/html.js中使用命令，然后在src/html.js中使用next命令，在body标签之前添加链接和代码：
<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"
});
}
`,
}
}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50752101
复制相关文章
相似问题
腾讯云开发者
