swiperのスライドごとにアニメーションを発動させたい

実現したいこと

現在サイト模写をしております。
swiperまで動かせたのですが、ここから画像が切り替わる度に文字が下から上に浮かび上がるようにしたいと考えています。

前提

最初の画面はうまくいくのですが２枚目以降がどうしてもうまくいかないです。

該当のソースコード

html
1  <div class="swiper">
2    <div class="swiper-wrapper">
3      <div class="swiper-slide js-slide">
4        <img src="/image/mvSlide/mvSlide-hotel.jpeg" alt="">
5        <div class="slide-textBox js-mv">
6          <h2 class="mv-font">極楽の名湯、情緒あふれる憩いの湯宿を旅する。</h2>
7          <p class="mv-font">
8            古来より伝統を継ぐ老舗温泉の、良質で効能豊かな源泉を心ゆくまで満喫。
9            <br>
10            心のこもった一流のおもてなしと、安らぎと癒しがあふれる魅惑の空間。一度訪れたら忘れられない、極楽の世界へご案内します。
11          </p>
12          <div class="mv-button">
13            <a href="">人気の温泉宿特集を見る</a>
14          </div>
15        </div>
16      </div>
17      <div class="swiper-slide">
18        <img src="/image/mvSlide/mvSlide-tea.jpeg" alt="">
19        <div class="slide-textBox js-mv">
20          <h2 class="mv-font">極楽の名湯、情緒あふれる憩いの湯宿を旅する。</h2>
21          <p class="mv-font">
22            古来より伝統を継ぐ老舗温泉の、良質で効能豊かな源泉を心ゆくまで満喫。
23            <br>
24            心のこもった一流のおもてなしと、安らぎと癒しがあふれる魅惑の空間。一度訪れたら忘れられない、極楽の世界へご案内します。
25          </p>
26          <div class="mv-button">
27            <a href="">人気の温泉宿特集を見る</a>
28          </div>
29        </div>
30      </div>
31      <div class="swiper-slide">
32        <img src="/image/mvSlide/mvSlide-snow.jpeg" alt="">
33        <div class="slide-textBox js-mv">
34          <h2 class="mv-font">極楽の名湯、情緒あふれる憩いの湯宿を旅する。</h2>
35          <p class="mv-font">
36            古来より伝統を継ぐ老舗温泉の、良質で効能豊かな源泉を心ゆくまで満喫。
37            <br>
38            心のこもった一流のおもてなしと、安らぎと癒しがあふれる魅惑の空間。一度訪れたら忘れられない、極楽の世界へご案内します。
39          </p>
40          <div class="mv-button">
41            <a href="">人気の温泉宿特集を見る</a>
42          </div>
43        </div>
44      </div>
45      <div class="swiper-slide">
46        <img src="/image/mvSlide/mvSlide-meet.jpeg" alt="">
47        <div class="slide-textBox">
48          <h2 class="mv-font">極楽の名湯、情緒あふれる憩いの湯宿を旅する。</h2>
49          <p class="mv-font">
50            古来より伝統を継ぐ老舗温泉の、良質で効能豊かな源泉を心ゆくまで満喫。
51            <br>
52            心のこもった一流のおもてなしと、安らぎと癒しがあふれる魅惑の空間。一度訪れたら忘れられない、極楽の世界へご案内します。
53          </p>
54          <div class="mv-button">
55            <a href="">人気の温泉宿特集を見る</a>
56          </div>
57        </div>
58      </div>
59    </div>
60    <div class="swiper-button-prev"></div>
61    <div class="swiper-button-next"></div>
62  </div>
63

SCSS
1.swiper{
2    overflow: hidden;
3    width: 100%;
4    height: auto;
5    position: relative;
6    .swiper-wrapper{
7      width: 100%;
8      .swiper-slide{
9        position: relative;
10        img{
11          width: 100%;
12        }
13        .slide-textBox{
14          width: 80%;
15          position: absolute;
16          top: 50%;
17          left: 50%;
18          transform: translate(-50%,-50%);
19          h2{
20            font-size: 4em;
21            color: $white_fff;
22            text-align: center;
23          }
24          p{
25            font-size: 1.6em;
26            color: $white_fff;
27            text-align: center;
28          }
29          .mv-button{
30            display: flex;
31            justify-content: center;
32            a{
33              padding: 1rem 4rem;
34              border: 1px solid $white_fff;
35              border-radius: 25px;
36              color: $white_fff;
37              font-size: 1.4em;
38              text-decoration: none;
39              background-color: $light_brown;
40              &:hover{
41                background-color: $dark_brown;
42              }
43            }
44          }
45        }
46      }
47    }
48    .swiper-button-prev{
49      width: 40px;
50      color: $white_fff;
51      &::after{
52        font-size: 2.4em;
53      }
54    }
55    .swiper-button-next{
56      width: 40px;
57      color: $white_fff;
58      &::after{
59        font-size: 2.4em;
60      }
61    }
62  }
63

js
1const mvSlides = gsap.utils.toArray(".js-mv");
2mvSlides.forEach((mvSlide) => {
3  gsap.fromTo(
4    mvSlides,
5    {
6      y: -100,
7      autoAlpha: 0,
8    },
9    {
10      y: 0,
11      autoAlpha: 1,
12      stagger: 0.2,
13      scrollTrigger:{
14        trigger: ".js-slide",
15        start: "top center",
16      },
17    }
18  );
19});

試したこと

jsのファイルにも書いたのですが、繰り返しのコードを書いてみてみましたができませんでした。

Lhankor_Mhy

2023/12/26 04:12

GSAP は必須条件ですか？

yudai1107

2023/12/26 04:48

ご質問ありがとうございます。特に必須ではないです。自分が最近学習していた内容の中にGSAPがありこれなら実装できるかなと思ってgsapを使用した次第です。

Lhankor_Mhy

2023/12/26 05:06

なるほど。 new Swiper(...) みたいなコードを書いていると思うんですが、ご提示いただけますか？また、模写元はこれですか？ https://finding-japan.com/

yudai1107

2023/12/26 06:09

jsのコードはこちらになります。 const swiper = new Swiper(".swiper", { loop: true, // ループさせる speed: 1500, // 少しゆっくり(デフォルトは300) autoplay: { // 自動再生 delay: 5000, // 1.5秒後に次のスライド }, // ナビボタンが必要なら追加 navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" } }); 模写元はこちらになります。 https://demo.tcd-theme.com/tcd050/

行動規範の内容に同意します

回答1件

ベストアンサー

当方で試したところ、CSSだけで大丈夫でした。GSAPはいらないです。

一応、サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/c3j64how/

css
1.slide-textBox>* {
2    opacity: 0;
3    translate: 0 15px;
4}
5
6:where(:where(.swiper-slide-active, .swiper-slide-prev) .slide-textBox) {
7    &>:nth-child(1) {
8        animation: fadeIn 1s ease forwards 1.2s;
9    }
10
11    &>:nth-child(2) {
12        animation: fadeIn 1.1s ease forwards 1.4s;
13    }
14
15    &>:nth-child(3) {
16        animation: fadeIn 1.2s ease forwards 1.6s;
17    }
18}
19
20@keyframes fadeIn {
21    to {
22        opacity: 1;
23        translate: 0 0;
24    }
25}