用Gsap和ScrollTrigger在滚动轴上实现卡片叠加动画
用Gsap和ScrollTrigger在滚动轴上实现卡片叠加动画
提问于 2022-08-20 17:23:42
我有一个模块，其中3个卡片堆叠在一起，然后，在卷轴上，卡片将一个一个地叠出来。参见期望效果的GIF。
我试着用GSAP和ScrollTrigger来模仿上面的效果，但是我的动画产生了不好的效果。
这是我的代码，可以在+1200 my屏幕上查看：
$(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>
问题
- 从演示中您可以看到，一旦“滚动启动”指示器滚动到和超过“开始”指示器，卡片就消失了。在检查代码时，由于某种原因，当指示符通过时，
cardStacking__cards的top值为top: -1334.52px，我不知道为什么。 - 当卡在视图中时，该部分不带针。我试着在所有的卡片被揭穿之前把这部分钉起来，然后解锁。
Stack Overflow用户
发布于 2022-08-24 18:22:09
你可以按下面的方式做。我创建了您粘贴的代码的简化版本，以展示该功能。这里也有一个码页。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73428735
复制相关文章
相似问题
腾讯云开发者
