fullpage.js 的 Gsap ScrollTrigger
Gsap ScrollTrigger with fullpage.js
我在 React fullpage.js 中使用 GSAP ScrollTrigger 时遇到问题。我有几个带有“部分”class 的部分。在它们内部,有些内容并不被认为是立即可见的。我需要在加载我的网站和初始化 fullpage.js 时,我有机会滚动浏览我的部分和 运行 GSAP 时间线以及 ScrollTrigger。我不明白为什么 scrollTrigger 在 scrollOverflow = {true} 的部分内不起作用。
在我的想法中,它看起来像这样:站点加载,React 整页初始化,然后是带有动画滚动的部分(如我所附的代码笔中所示)。 gsap.timeline结束后,切换fullpage.js段。
如何实施?我寻求帮助。
Link 到代码笔:https://codepen.io/desginer123/pen/WNZLpQj
Link 使用 React fullpage.js 到当前网站:https://projectxmain48161.gtsb.io/
反应整页 settings.js:
//fullpage options
licenseKey = {'There is my license key'}
scrollingSpeed = {1000}
fixedElements = {'.grow, .logo, .pagination-wrapper, .cursor2'}
menu = {'.pagination-wrapper'}
anchors = {['about', 'mission']}
scrollOverflow = {true}
onLeave = {function(origin, destination, direction){
var loadedSection = this;
changePagination(destination.index + 1)
//using anchorLink
if(destination.index == 1){
gsap.to('.about-1', {opacity: 0, duration: 1.2})
gsap.to('.mission', {opacity: 1, duration: 1.2})
gsap.to('.mission-title', {opacity: 1, duration: 1.2})
}
if(destination.index == 0){
gsap.to('.about-1', {opacity: 1, duration: 1.2})
gsap.to('.mission', {opacity: 0, duration: 1.2})
}
}}
render={({ state, fullpageApi }) => {
return (
<main className='pageStyles'>
<Cursor/>
<Btn/>
<Pagination/>
<ReactFullpage.Wrapper>
<FirstScreen changePagination={changePagination}/>
</ReactFullpage.Wrapper>
</main>
);
}}
/>
);
JSX:与codepen相同html
I don't understand why scrollTrigger doesn't work inside a section with scrollOverflow = {true}.
因为使用 scrollOverflow 的部分没有使用浏览器滚动行为,而是 JavaScript 模拟滚动行为。
fullPage.js 版本 4 在这方面的工作方式有所不同,您可能会更容易在那里做您需要的事情。应该会在这个月底出来。
我在 React fullpage.js 中使用 GSAP ScrollTrigger 时遇到问题。我有几个带有“部分”class 的部分。在它们内部,有些内容并不被认为是立即可见的。我需要在加载我的网站和初始化 fullpage.js 时,我有机会滚动浏览我的部分和 运行 GSAP 时间线以及 ScrollTrigger。我不明白为什么 scrollTrigger 在 scrollOverflow = {true} 的部分内不起作用。
在我的想法中,它看起来像这样:站点加载,React 整页初始化,然后是带有动画滚动的部分(如我所附的代码笔中所示)。 gsap.timeline结束后,切换fullpage.js段。
如何实施?我寻求帮助。
Link 到代码笔:https://codepen.io/desginer123/pen/WNZLpQj
Link 使用 React fullpage.js 到当前网站:https://projectxmain48161.gtsb.io/
反应整页 settings.js:
/>
);
JSX:与codepen相同html//fullpage options
licenseKey = {'There is my license key'}
scrollingSpeed = {1000}
fixedElements = {'.grow, .logo, .pagination-wrapper, .cursor2'}
menu = {'.pagination-wrapper'}
anchors = {['about', 'mission']}
scrollOverflow = {true}
onLeave = {function(origin, destination, direction){
var loadedSection = this;
changePagination(destination.index + 1)
//using anchorLink
if(destination.index == 1){
gsap.to('.about-1', {opacity: 0, duration: 1.2})
gsap.to('.mission', {opacity: 1, duration: 1.2})
gsap.to('.mission-title', {opacity: 1, duration: 1.2})
}
if(destination.index == 0){
gsap.to('.about-1', {opacity: 1, duration: 1.2})
gsap.to('.mission', {opacity: 0, duration: 1.2})
}
}}
render={({ state, fullpageApi }) => {
return (
<main className='pageStyles'>
<Cursor/>
<Btn/>
<Pagination/>
<ReactFullpage.Wrapper>
<FirstScreen changePagination={changePagination}/>
</ReactFullpage.Wrapper>
</main>
);
}}
I don't understand why scrollTrigger doesn't work inside a section with scrollOverflow = {true}.
因为使用 scrollOverflow 的部分没有使用浏览器滚动行为,而是 JavaScript 模拟滚动行为。
fullPage.js 版本 4 在这方面的工作方式有所不同,您可能会更容易在那里做您需要的事情。应该会在这个月底出来。