反应中的 scrollmagic 和 gsap 的构建版本与开发版本不同
Build version of scrollmagic and gsap in react not the same as dev version
我正在尝试在 React 中使用 ScrollMagic 和 gsap 库,一切都很好,直到我尝试构建我的代码,我尝试了我可以在网上找到的所有导入解决方案,但它似乎没有表现同理
我创建了一个卡片列表,当到达某个部分时它会水平滚动,在开发版本中它的行为完全一样但是当我在生产版本中(构建后)它以对角线方式滚动。
这是我的一些代码以及我如何安装这些库:
正在安装 gsap:
npm i gsap
正在安装 scrollmagic:
npm i scrollmagic
我的反应代码:
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import { TweenMax, TimelineLite, TimelineMax, TweenLite, Linear } from "gsap/all"; // Also works with TweenLite and TimelineLite
import * as ScrollMagic from "scrollmagic/scrollmagic/uncompressed/ScrollMagic"; // Or use scrollmagic-with-ssr to avoid server rendering problems
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";
import './listCardsH.css';
import Image from '../images/Image';
import Titles from '../titles/Titles';
ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineLite);
class ListCardsH extends Component {
componentDidMount (){
TweenLite.defaultEase = Linear.easeNone;
var titles = ReactDOM
.findDOMNode(this.refs['title1'])
.getBoundingClientRect()
console.log(titles)
var controller = new ScrollMagic.Controller();
// var tl = new TimelineLite();
// tl.to("#js-slideContainer", 1, {x:'-100%'})
var tl = new TimelineMax()
.add(TweenMax.to('#js-slideContainer', 1, {x: '-70%'}))
new ScrollMagic.Scene({
triggerElement: '#bigTrigger',
triggerHook: 0,
duration: '100%'
})
.setPin("#titleId", {pushFollowers: false})
.addTo(controller);
new ScrollMagic.Scene({
triggerElement: "#bigTrigger",
triggerHook: 0 ,
duration: "100%"
})
.setPin("#js-slideContainer")
.setTween(tl)
.addTo(controller);
}
render() {
return (
<div className="containerWrapper" id="bigTrigger">
<div className='bigTitle' id='titleId'>
<Titles></Titles>
</div>
<div className="wrapper" id="js-wrapper" >
<div className="sections " id="js-slideContainer">
<div className='childCardH section' ref='title1'>
<div className='sectionTitle'>
<Image srcImg='https://www.inform.kz/radmin/news/2019/11/03/191103143718887e.jpg'></Image>
</div>
</div>
<div className='childCardH section' ref='title1'>
<div className='sectionTitle'>
<Image srcImg='https://www.inform.kz/radmin/news/2019/11/03/191103143718887e.jpg'></Image>
</div>
</div>
<div className='childCardH section' ref='title1'>
<div className='sectionTitle'>
<Image srcImg='https://www.inform.kz/radmin/news/2019/11/03/191103143718887e.jpg'></Image>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default ListCardsH;
CSS
.wrapper {
width: 130%;
height: 100%;
perspective: 1000;
-webkit-perspective: 1000;
perspective-origin: 0;
-webkit-perspective-origin: 0;
overflow: hidden;
}
.section {
height: 120%;
width: calc( 100% / 3);
float: left;
position: relative;
}
.sections {
width: 100%;
height: 50vh;
/* Change this height to move the images up and down */
}
.sectionTitle {
position: absolute;
width: 40vw;
top: 50%;
left: 120%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 30px;
color: #fff;
}
.bigTitle {
width: 100vw;
text-align:center;
padding-right: 10vw;
}
导致不良行为的问题是 css 上的 perspective
元素,使用 3d 动画时需要添加透视图,但在这种情况下不应使用,因为动画只是一个 2d 滚动,它将垂直滚动转换为水平滚动,我花了几天时间才弄清楚这一点,我希望它能帮助其他人构建如此漂亮的动画。我的代码还有一些其他问题,但我修复了所有问题并想分享它,以便它可以作为任何想要制作类似东西的人的参考。
请在下方找到我代码的最终版本,并在 CodePen 上进行现场演示:
我创建的 'React + ScrollMagic + Gsap : Horizontal with pined title to top' 的现场演示。
我正在尝试在 React 中使用 ScrollMagic 和 gsap 库,一切都很好,直到我尝试构建我的代码,我尝试了我可以在网上找到的所有导入解决方案,但它似乎没有表现同理
我创建了一个卡片列表,当到达某个部分时它会水平滚动,在开发版本中它的行为完全一样但是当我在生产版本中(构建后)它以对角线方式滚动。
这是我的一些代码以及我如何安装这些库:
正在安装 gsap:
npm i gsap
正在安装 scrollmagic:
npm i scrollmagic
我的反应代码:
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import { TweenMax, TimelineLite, TimelineMax, TweenLite, Linear } from "gsap/all"; // Also works with TweenLite and TimelineLite
import * as ScrollMagic from "scrollmagic/scrollmagic/uncompressed/ScrollMagic"; // Or use scrollmagic-with-ssr to avoid server rendering problems
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";
import './listCardsH.css';
import Image from '../images/Image';
import Titles from '../titles/Titles';
ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineLite);
class ListCardsH extends Component {
componentDidMount (){
TweenLite.defaultEase = Linear.easeNone;
var titles = ReactDOM
.findDOMNode(this.refs['title1'])
.getBoundingClientRect()
console.log(titles)
var controller = new ScrollMagic.Controller();
// var tl = new TimelineLite();
// tl.to("#js-slideContainer", 1, {x:'-100%'})
var tl = new TimelineMax()
.add(TweenMax.to('#js-slideContainer', 1, {x: '-70%'}))
new ScrollMagic.Scene({
triggerElement: '#bigTrigger',
triggerHook: 0,
duration: '100%'
})
.setPin("#titleId", {pushFollowers: false})
.addTo(controller);
new ScrollMagic.Scene({
triggerElement: "#bigTrigger",
triggerHook: 0 ,
duration: "100%"
})
.setPin("#js-slideContainer")
.setTween(tl)
.addTo(controller);
}
render() {
return (
<div className="containerWrapper" id="bigTrigger">
<div className='bigTitle' id='titleId'>
<Titles></Titles>
</div>
<div className="wrapper" id="js-wrapper" >
<div className="sections " id="js-slideContainer">
<div className='childCardH section' ref='title1'>
<div className='sectionTitle'>
<Image srcImg='https://www.inform.kz/radmin/news/2019/11/03/191103143718887e.jpg'></Image>
</div>
</div>
<div className='childCardH section' ref='title1'>
<div className='sectionTitle'>
<Image srcImg='https://www.inform.kz/radmin/news/2019/11/03/191103143718887e.jpg'></Image>
</div>
</div>
<div className='childCardH section' ref='title1'>
<div className='sectionTitle'>
<Image srcImg='https://www.inform.kz/radmin/news/2019/11/03/191103143718887e.jpg'></Image>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default ListCardsH;
CSS
.wrapper {
width: 130%;
height: 100%;
perspective: 1000;
-webkit-perspective: 1000;
perspective-origin: 0;
-webkit-perspective-origin: 0;
overflow: hidden;
}
.section {
height: 120%;
width: calc( 100% / 3);
float: left;
position: relative;
}
.sections {
width: 100%;
height: 50vh;
/* Change this height to move the images up and down */
}
.sectionTitle {
position: absolute;
width: 40vw;
top: 50%;
left: 120%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 30px;
color: #fff;
}
.bigTitle {
width: 100vw;
text-align:center;
padding-right: 10vw;
}
导致不良行为的问题是 css 上的 perspective
元素,使用 3d 动画时需要添加透视图,但在这种情况下不应使用,因为动画只是一个 2d 滚动,它将垂直滚动转换为水平滚动,我花了几天时间才弄清楚这一点,我希望它能帮助其他人构建如此漂亮的动画。我的代码还有一些其他问题,但我修复了所有问题并想分享它,以便它可以作为任何想要制作类似东西的人的参考。
请在下方找到我代码的最终版本,并在 CodePen 上进行现场演示:
我创建的 'React + ScrollMagic + Gsap : Horizontal with pined title to top' 的现场演示。