使用Gsap和ScrollTrigger在卷轴上实现卡片堆叠动画

Question

我有一个模块，其中3张牌叠在一起，然后在滚动时，这些牌将一张接一张地展开。请在此处查看所需效果的GIF。

我曾尝试使用GSAP和ScrollTrigger来模拟上述效果，但是，我的动画产生了不希望的结果。

这是我的代码，要在+1200px的屏幕上查看：

$(function() {

gsap.registerPlugin(ScrollTrigger);
const container = document.querySelector(".cardStacking__cards");
const card = document.querySelector(".stackCard");
const cards = document.querySelectorAll(".stackCard");
const height = 510;
const timeline = gsap.timeline({
scrollTrigger: {
trigger: ".cardStacking__cards",
pin: true,
markers: true,
scrub: 1,
start: "bottom-=10% center",
end: "bottom top"
}
});
timeline.from(".stackCard", {
y: (index) => height * (cards.length - (index + 1)),
duration: (index) => 0.6 / (index + 1),
ease: "none",
stagger: (index) => 0.3 * (index),
});

});

:root {
--navy: #0E185F;
--white: #FFFFFF;
}
.background--navy {
background-color: var(--navy);
}
.color--white {
color: var(--white);
}
.spacer {
height: 2000px;
}
.cardStacking {
padding: 120px 0 141px 0;
/*********/
}
.cardStacking__intro {
margin-bottom: 100px;
}
.cardStacking .stackCard {
border-radius: 40px;
background: linear-gradient(90deg, #c7defe 0%, #e7e7f2 100%);
margin-bottom: 50px;
padding: 106px 135px 126px 77px;
/* CONTENT */
}
.cardStacking .stackCard:first-child {
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.16);
}
.cardStacking .stackCard__content-header {
margin-bottom: 10px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<div class="spacer"></div>
<section class="cardStacking background--navy">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-7">
<div class="cardStacking__intro text-center">
<h2 class="cardStacking__intro-header color--white">LOREM IPSUM DOLOR SIT AMET CONSETETUR SADIPSCING</h2>
<div class="cardStacking__intro-copy color--white">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-10">
<div class="cardStacking__cards">

<!------------>
<!-- CARD 1 -->
<!------------>

<div class="stackCard" style="z-index: 0;">
<div class="stackCard__content">
<span class="stackCard__content-header d-block">Header</span>
<div class="stackCard__content-copy">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.</div>
</div>
</div>

<!------------>
<!-- CARD 2 -->
<!------------>
<div class="stackCard" style="z-index: -1;">
<div class="stackCard__content">
<span class="stackCard__content-header d-block">Header 2</span>
<div class="stackCard__content-copy">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.</div>
</div>
</div>

<!------------>
<!-- CARD 3 -->
<!------------>
<div class="stackCard" style="z-index: -2;">
<div class="stackCard__content">
<span class="stackCard__content-header d-block">Header 3</span>
<div class="stackCard__content-copy">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="spacer"></div>

问题

1. 从演示中您可以看到；滚动器启动"；指示器滚动到并经过"0"；"开始"；指示灯，卡片消失。在检查代码时，由于某种原因，当指标通过时，cardStacking__cards的top值为top: -1334.52px，我不确定为什么。

2. 当卡片在视图中时，该部分不会固定。我试着固定这个部分，直到所有的卡片都显示出来，然后解开。

Answer 1

您可以按如下方式进行操作。我创建了您粘贴的代码的简化版本来展示该功能。这也是它的代码笔。

gsap.registerPlugin(ScrollTrigger);
const tl = gsap.timeline({
scrollTrigger: {
trigger: ".cards",
pin: true,
start: "top 10%",
end: "bottom+=1000 bottom",
scrub: true
}
});
tl.to(".first", {
y: "-90vh"
}).to(
".second",
{
y: "-85vh"
},
"-=0.15"
);

body {
text-align: center;
}
.cards {
position: relative;
height: 85vh;
}
.card {
border-radius: 2rem;
position: absolute;
inset: 0;
}
.first {
background: lightblue;
bottom: 10vh;
}
.second {
background: lightgreen;
bottom: 5vh;
}
.third {
background: lightgray;
}

<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<div>
<h1>Scroll to see magic</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
<div class="cards">
<div class="card third"></div>
<div class="card second"></div>
<div class="card first"></div>
</div>
<div>
<h1>Scroll to see magic</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>

Answer 2

请看一下工作示例https://jsfiddle.net/23dz0evy/4/.通过修改const bottom = 40，可以改变面板之间的底部边距，适用于无限数量的面板。