Skip to main content

GreenSock(GSAP) 相关

一次滚动一屏

相关关键词:

  • fullpage.js
  • one page scroll

调研路径

  1. Google 搜索:gsap exactly scroll 100vh
  2. 翻了几个搜索结果之后,发现 Full screen sections 这篇问答符合自己的需求
  3. 二楼提到了另一篇问答 Full page site,看了 CodePen 示例之后确认是自己需要的效果
  4. 加餐:Full page scrolling and pinning 这篇问答里,二楼给出了各种整屏滚动效果的代码示例

关键代码

// 用到了 ScrollTrigger 这个插件
ScrollTrigger.create({
trigger: '.p2',
start: "top bottom-=1",
end: "bottom top+=1",
onEnter: () => goToSection('.p2'),
onEnterBack: () => goToSection('.p2'),
})

// 用到了 ScrollToPlugin 这个插件
const goToSection = (section) => {
gsap.to(window, {
scrollTo: {
y: section,
autoKill: false,
},
duration: 1,
})
}

水平滚动

实现效果:到达页面指定区域后,鼠标滚轮上下滚动时,页面内容左右滚动。

参考链接:ScrollTrigger: Horizontal Scroll pin-spacer height issue

可逆动画

调研路径

  1. Google 搜索:gsap reversable
  2. 看到一个貌似有用的链接 Reversing animations on ScrollTrigger
  3. to do...