Instagram Story Progress Bar

Question

I'm building something similar to the instagram story function with HTML, TailwindCSS and JavaScript. I have 6 different slides where I'm navigating with touch taps with hammerJS. At the top I have 6 progression bars which should load while the user is viewing the current slide. I'm doing this with animeJS. The carousel is set up with swiperJS. My problem is, that I'm not able to load the progress bar of the current slide with animeJS. Maybe somebody can help me?

HTML:

<div class="z-50 absolute fixed top-4 left-4 grid grid-cols-6 gap-4 max-w-md">
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide1" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide2" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide3" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide4" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide5" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide6" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
      </div>

The swiper carousel:

let swiper = new Swiper(".mySwiper", {
      speed: 0,
      longSwipes: false,
      allowTouchMove: false,
    });

Make the progress bar full of the previous screen (like if you skip through the story):

swiper.on('slideNextTransitionStart', function () {
      for (let i = 0; i < swiper.activeIndex; i++) {
        $(`#progressSlide${i + 1}`).css('width', '100%');
      }
    });

    swiper.on('slidePrevTransitionStart', function () {
      for (let i = 6; i > swiper.activeIndex; i--) {
        $(`#progressSlide${i}`).css('width', '0%');
      }
    });

Touch navigation with hammerJS:

let hammertime = new Hammer(document.querySelector('#swiper'));

    hammertime.on('tap', (e) => {
      if (e.center.x > window.innerWidth / 2) {
        swiper.slideNext();
      } else {
        swiper.slidePrev()
      }
    });

AnimeJS timeline:

let timeline = anime.timeline({
      targets: `#progressSlide${swiper.activeIndex}`,
      width: "100%",
      autoplay: true,
      duration: 500,
      easing: 'linear',
      loop: false
    })

I want to load the current screen with anime JS like that:

swiper.on('slideChange', function () {
      timeline.pause();
      timeline.restart();
      timeline.add({
        targets: `#progressSlide${swiper.activeIndex}`,
        width: "100%"
      })
      timeline.play();
    });

but it's not working correctly. Every time it starts from the beginning, means after reaching screen 3 it starts with the progression animation for screen 1, 2 and 3. But I want it only for screen 3 and the current screens are already full loaded.

Answer 1

Found the solution:

Create a anime function:

function animationProcess() {
      anime({
        targets: `#progressSlide${swiper.activeIndex + 1}`,
        width: '100',
        easing: 'linear',
        duration: 5000,
        complete: function (anim) {
          swiper.slideNext();
        }
      });
    }

And add the .remove function and the animation function in the swiper update functions:

swiper.on('slideNextTransitionStart', function () {
      for (let i = 0; i < swiper.activeIndex; i++) {
        $(`#progressSlide${i + 1}`).css('width', '100%');
      };
      anime.remove(`#progressSlide${swiper.activeIndex}`);
      animationProcess();
    });

    swiper.on('slidePrevTransitionStart', function () {
      for (let i = 6; i > swiper.activeIndex; i--) {
        $(`#progressSlide${i}`).css('width', '0%');
      };
      anime.remove(`#progressSlide${swiper.activeIndex + 2}`);
      animationProcess();
    });