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

1export const headerAnimation = (color) => {
2  const el = document.getElementById("project-header");
3  anime({
4    targets: el.children,
5    duration: 667,
6    delay: 333,
7    background: color,
8    easing: "cubicBezier(0.55,0,0.29,1)",
9  });
10};
11
12export const initHeaderAnimation = (noOfSlides) => {
13  let currentSlideSection =
14    noOfSlides[swiper.activeIndex].querySelector("section");
15  let sectionClass = currentSlideSection.className;
16  if (sectionClass.includes("header-pink")) {
17    headerAnimation("#ffacac");
18  } else if (sectionClass.includes("header-black")) {
19    headerAnimation("#000000");
20  } else if (sectionClass.includes("header-white")) {
21    headerAnimation("#fafafa");
22  } else if (sectionClass.includes("header-gold")) {
23    headerAnimation("#ffc641");
24  } else if (sectionClass.includes("header-mint")) {
25    headerAnimation("#61d4b6");
26  } else {
27    headerAnimation("#469df8");
28  }
29};