如何正确地使gsap中刷新时的时间线无效

Question

我正在尝试使用gsap实现一个水平滚动部分。然而，在调整大小时，时间线会变得一团糟。它在水平部分的末端尤其明显，那里的白色空间越来越大，或者场地被切断(这取决于你是把窗户做得更宽还是更薄(。invalidateOnRefresh: true应该修复这个问题，并在刷新时重新计算时间轴值，但在我的示例中它没有效果。如何正确实施？

gsap.registerPlugin(ScrollTrigger);
const tl = gsap.timeline();
var sectionWidth = $(".section").width();
const ST = ScrollTrigger.create({
animation: tl,
trigger: ".container",
start: 0,
end: sectionWidth * 4,
scrub: true,
invalidateOnRefresh: true,
pin: true,
});

tl.to(".container", 5, {
x: -sectionWidth
})
.to(".container", 5, {
x: -sectionWidth * 2
})
.to(".container", 5, {
x: -sectionWidth * 3
})
.to(".container", 5, {
x: -sectionWidth * 4
});

.section {
width: 100vw;
height: 100vh;
background-color: red;
}
.section:nth-child(2n) {
background-color: blue;
}
.container {
width: 500vw;
display: flex;
}
body {
margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/ScrollTrigger.js"></script>
<div class="container">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>

Answer 1

我在这里添加了一个类似于您的简单演示：https://codepen.io/PhanDangKhoa96/pen/qByzezd

需要注意的两点：

• 使用%unit而不是vw作为宽度，您可以在此处阅读解释
• 应该为end: () => sectionWidth * 4使用回调函数

我还简化了tl

tl.to(sections, {xPercent: -100 * (sections.length -1)})