https://gv-lastfm-playground.vercel.app/js/animations/Swiper.anime.js

1export const swipeAnimation = (el, prevColor, color) => {
2  const variables = {
3    currentTransitionBackground: '#000000',
4  }
5
6  anime({
7    targets: el,
8    background: [prevColor, color],
9    duration: 667,
10    delay: 333,
11    easing: "cubicBezier(0.55,0,0.29,1)",
12  });
13  
14  anime({
15    targets: variables,
16    currentTransitionBackground: [prevColor, color],
17    duration: 667,
18    delay: 333,
19    easing: "cubicBezier(0.55,0,0.29,1)",
20    update: (data) => {
21      document.body.style.setProperty('--current-transition-background', variables.currentTransitionBackground)
22      document.querySelector("meta[name='theme-color']")?.setAttribute("content", variables.currentTransitionBackground);
23    },
24  });
25};
26
27export const initSwipeAnimation = (noOfSlides) => {
28  let prevSlideSection = noOfSlides[swiper.previousIndex]
29    ? noOfSlides[swiper.previousIndex].querySelector("section")
30    : null;
31  let currentSlideSection =
32    noOfSlides[swiper.activeIndex].querySelector("section");
33  // Needed to disable black lines between slides when using full height
34  let sliderContainer = document.querySelector(".swiper-container.main-slider");
35  let bgColor = (classNames) => {
36    if (classNames.contains("gold")) {
37      return "#ffc641";
38    } else if (classNames.contains("mint")) {
39      return "#61d4b6";
40    } else if (classNames.contains("blue")) {
41      return "#469df8";
42    } else if (classNames.contains("pink")) {
43      return "#ffacac";
44    } else if (classNames.contains("white")) {
45      return "#fafafa";
46    } else {
47      return "#000000";
48    }
49  };
50
51  noOfSlides.forEach((item, index) => {
52    let prevIndex = index - 1;
53
54    if (prevIndex >= 0) {
55      let section = item.querySelector("section");
56      let color = bgColor(
57        noOfSlides[prevIndex].querySelector("section").classList
58      );
59      section.style.backgroundColor = color;
60    }
61  });
62
63  let prevSlideColor = bgColor(
64    prevSlideSection
65      ? prevSlideSection.classList
66      : currentSlideSection.classList
67  );
68  let activeSlideColor = bgColor(currentSlideSection.classList);
69
70  swipeAnimation(sliderContainer, prevSlideColor, activeSlideColor);
71  swipeAnimation(currentSlideSection, prevSlideColor, activeSlideColor);
72  swipeAnimation(prevSlideSection, prevSlideColor, activeSlideColor);
73
74  // Header Logo animation
75};