<aside> ❤️ New to Webflow? Support the Channel by using my Webflow-Affiliate Link https://webflow.grsm.io/webtotheflow

</aside>

1. Add this to your Page Settings before the </body> Tag

<!-- SWIPER -->
<link rel="stylesheet" href="<https://unpkg.com/swiper@8/swiper-bundle.min.css>" />
<script src="<https://unpkg.com/swiper@8/swiper-bundle.min.js>"></script>

<!-- GSAP -->
<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js>"></script>

<!-- CUSTOM CODESANDBOX -->
<!-- By default the codesandbox stores files in the src folder. So you might need to add "/src" to your URL. e.g. "...csb.app/src/index.js" -->
<script src="[YOUR-CODESANDBOX-LINK]/[YOUR-CODESANDBOX-JSFILE-LINK]"></script>
<link rel="stylesheet" href="[YOUR-CODESANDBOX-LINK]/[YOUR-CODESANDBOX-CSS-FILE-LINK]" />

2. Add this to your Codesandbox index.js

// © Code by Marvin Aziz, <https://www.webtotheflow.com/>
// Copyright 2023, Marvin Aziz, All rights reserved.
// You have the license to use this code in your projects but not to redistribute it to others

const swiper = new Swiper(".swiper", {
  // Optional parameters
  keyboard: {
    enabled: true,
    onlyInViewport: false
  },
  direction: "horizontal",
  loop: true,

  // Navigation arrows
  navigation: {
    nextEl: ".swiper-button-next"
  }
});

swiper.on("slideChangeTransitionStart", function () {
  console.log("Transition Start");
  gsap.fromTo(
    "h1",
    {
      opacity: 1
    },
    {
      opacity: 0,
      duration: 0
    }
  );
});

swiper.on("slideChangeTransitionEnd", function () {
  console.log("On Change");

  gsap.fromTo(
    "h1",
    {
      yPercent: 200,
      opacity: 0
    },
    {
      opacity: 1,
      yPercent: 0,
      ease: "power4",
      duration: 1.4
    }
  );
});

3. Add this to your Codesandbox styles.css

/* Remove default swiper arrow */
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  opacity: 0;
}

Links

Swiper: https://swiperjs.com/swiper-api

GSAP: https://greensock.com/get-started/