GSAP ScrollTriggerでスクロールでカードが重なっていくアニメーションを作る

完成イメージ

Codepen

以下のCodepenでも確認できます！

実装

HTML

<div class="card-wrapper">
  <div class="card-contents"><img src="https://www.themoviedb.org/t/p/w1280/hbhFnRzzg6ZDmm8YAmxBnQpQIPh.jpg"/>
    <div class="card-description">
      <h1 class="card-description__title">WALL-E<span class="card-description__year">(2010)</span></h1>
      <p> <span class="card-description__genre">Animation</span><span class="card-description__genre">Family</span><span class="card-description__genre">Sci-Fi</span></p>
    </div>
  </div>
</div>
<div class="card-wrapper">
  <div class="card-contents"><img src="https://www.themoviedb.org/t/p/w1280/b4Oe15CGLL61Ped0RAS9JpqdmCt.jpg"/>
    <div class="card-description">
      <h1 class="card-description__title">Dunkirk<span class="card-description__year">(2017)</span></h1>
      <p> <span class="card-description__genre">Action</span><span class="card-description__genre">Drama</span><span class="card-description__genre">History</span></p>
    </div>
  </div>
</div>
<div class="card-wrapper">
  <div class="card-contents"><img src="https://www.themoviedb.org/t/p/w1280/4jeFXQYytChdZYE9JYO7Un87IlW.jpg"/>
    <div class="card-description">
      <h1 class="card-description__title">Coraline<span class="card-description__year">(2010)</span></h1>
      <p> <span class="card-description__genre">Animation</span><span class="card-description__genre">Family</span><span class="card-description__genre">Fantasy</span></p>
    </div>
  </div>
</div>
<div class="card-wrapper">
  <div class="card-contents"><img src="https://www.themoviedb.org/t/p/w1280/fSRb7vyIP8rQpL0I47P3qUsEKX3.jpg"/>
    <div class="card-description">
      <h1 class="card-description__title">Deadpool<span class="card-description__year">(2016)</span></h1>
      <p> <span class="card-description__genre">Action</span><span class="card-description__genre">Adventure</span><span class="card-description__genre">Comedy</span></p>
    </div>
  </div>
</div>
<div class="card-wrapper">
  <div class="card-contents"><img src="https://www.themoviedb.org/t/p/w1280/7PurMm0gUOJZ8Uk0oyuZlt1CKfJ.jpg"/>
    <div class="card-description">
      <h1 class="card-description__title">Pan's Labyrinth<span class="card-description__year">(2006)</span></h1>
      <p> <span class="card-description__genre">Fantasy</span><span class="card-description__genre">Drama</span><span class="card-description__genre">War</span></p>
    </div>
  </div>
</div>
<div class="spacer"></div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  background: #121212;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #000;
}

.card-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}
.card-wrapper:nth-of-type(2n) {
  transform: rotate(3deg);
}
.card-wrapper:nth-of-type(2n+1) {
  transform: rotate(-3deg);
}
.card-wrapper:nth-of-type(3n) {
  transform: rotate(0);
}

.card-contents {
  position: relative;
  width: 300px;
  height: 550px;
  background-color: #000;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

img {
  position: absolute;
  width: 100%;
  height: 80%;
  border-radius: 15px 15px 0 0;
  object-fit: cover;
}

.card-description {
  background: linear-gradient(rgba(0, 0, 0, 0), black);
  position: absolute;
  bottom: 10px;
  left: 0;
  z-index: 100;
  color: #fff;
  text-align: left;
  line-height: 1;
  margin-left: 20px;
}
.card-description__title {
  font-size: 28px;
}
.card-description__year {
  font-size: 11px;
  margin-left: 10px;
}
.card-description__genre {
  padding: 6px 8px;
  margin-right: 10px;
  border: 1px solid #fff;
  border-radius: 5px;
  opacity: 0.7;
  font-size: 10px;
  text-transform: uppercase;
}

.spacer {
  width: 100%;
  height: 100vh;
}

JavaScript

※JQueryとGSAPを使ってます

$(function () {
  let cards = gsap.utils.toArray(".card-wrapper");

  let stickDistance = '100px';

  let lastCardST = ScrollTrigger.create({
    trigger: cards[cards.length - 1],
    start: "bottom bottom"
  });

  cards.forEach((card, index) => {

    ScrollTrigger.create({
      trigger: card,
      start: "center center",
      end: () => lastCardST.start + stickDistance,
      pin: true,
      pinSpacing: false,
      ease: "none",
      toggleActions: "restart none none reverse"
    });
  });
});