gsap-swiper

depends on gsap v3 and the Draggable plugin (included in free license)

npm install gsap  #yarn add gsap
1
2
3
4
5
6
7
8
9
10
npm install --save gsap-swiper  #yarn add gsap-swiper
import { Swiper } from "gsap-swiper";

const swiper = new Swiper('.swiper-container', true, 2);
swiper.initSwiper();
new Swiper(
                container = '.swiper-container',
                autoPlay = true,
                slideDelay = 3,
                slideDuration = 0.3,
                wrapper = '.swiper-inner',
                slide = '.swiper-slide',
                pagination = '.swiper-pagination',
                paginationBullet = '.swiper-pagination-bullet',
                paginationBulletSVG = ''  // SVG string
          )
.section--swiper {
    position: relative;
    margin: 10% auto;
    width: 80%;
    height: 220px;
    max-width: 900px;
    box-shadow: 0 10px 20px 0 rgb(0 0 0 / 5%);
}

.swiper-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    background-image: linear-gradient(30deg, #000, #222);
    box-shadow: 0 10px 20px 0 rgb(0 0 0 / 5%);
    border-radius: 12px;
    overflow: hidden;
}

.swiper-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.swiper-inner .swiper-slide {
    position: absolute;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.swiper-pagination {
    position: absolute;
    left: 20px;
    bottom: 10px;
    display: inline-block;
    width: auto;
}

.swiper-pagination-bullet {
    display: inline-block;
    animation-play-state: paused;
    stroke-dasharray: 0 100%;
}

.swiper-pagination-bullet svg {
    pointer-events: none;
}

.swiper-pagination-bullet svg circle {
    pointer-events: none;
}

.swiper-pagination-bullet.path {
    stroke-dasharray: 0 100%;
    stroke-dashoffset: 0;
    animation-iteration-count: 1;
    animation-play-state: running;
    animation-name: dash;
}

@keyframes dash {
    from {
        stroke-dasharray: 0 100%;
    }

    to {
        stroke-dasharray: 100% 0;
    }
}