javascript - Gsap ScrollTrigger 动画水平
问题描述
我正在尝试进行水平滚动,而我的项目在移动时缩放到 0.5,但无法在 Foreach 中制作滚动触发器,这是我的代码的代码笔: https ://codepen.io/beatlesbob/pen /eYWMREW
sections.forEach((section,index) => {
let tl = gsap.timeline({
scrollTrigger: {
trigger: section,
pin: true, // pin the trigger element while active
start: `top top-=${section.clientHeight*(index)}`, // when the top of the trigger hits the top of the viewport
end: `+=${section.clientWidth+section.clientWidth*(index)}`, // end after scrolling 500px beyond the start
scrub:true,
toggleClass:'active',
pinSpacing:false,
}
});
tl.to(section, {xPercent: -100 * (sections.length-1)});
});```
Also I cannot put the active class on the current section
解决方案
推荐阅读
- r - 与 R 上下文中的*点对*列表相比,*通用向量*是什么?`alist()` 有什么作用?
- android - 等待活动完全显示
- swift - 从不同的 ViewController 更改 UIButton
- python - 通过悬停在散景中突出显示多个 hex_tiles
- angular - 想用 json 对象创建动态数组
- python - 如果字符串出现在斜杠之间,如何用包含空格的字符串替换
- flutter - 使用自定义 ScrollPhysics 用动态边界抖动 PageView
- python - Correlation between boolean and continues value
- ruby - Rubocop 禁用所有规则并创建启用规则的 whilelist
- java - 如何在 UI 接受的 itextpdf PDF 中显示多语言或任何 UNICODE 特殊字符?