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

1import {delay, fadeOutOptions} from "./settings.anime.js";
2
3export const topChartAnimation = (element, slide, animationDirection) => {
4  let el = element.querySelector(".highcharts-series");
5  let footer = element.querySelector(".highcharts-axis-labels");
6  let series = el.children;
7
8  let stats = element.querySelectorAll(".content .top-charts-stats span");
9
10  let animateStats = () => {
11    anime({
12      targets: stats,
13      translateY: ["100%", 0],
14      opacity: [0, 1],
15      delay: anime.stagger(300),
16      duration: 900,
17      easing: "easeInOutQuart",
18    });
19  };
20
21  let animateInInit = () => {
22    if (!slide.className.includes("stop-animation")) {
23      slide.classList.add("stop-animation");
24    }
25
26    if (slide.id === "slide_06_02_02") {
27      document.querySelector("#yellow-wipes").classList.add("wipe-acitve");
28      yellowWipes.play();
29      yellowWipes.addEventListener("complete", () => {
30        document.querySelector("#yellow-wipes").classList.remove("wipe-acitve");
31      });
32    } else if (slide.id === "slide_06_04_02") {
33      document.querySelector("#green-wipes").classList.add("wipe-acitve");
34      greenWipes.play();
35      greenWipes.addEventListener("complete", () => {
36        document.querySelector("#green-wipes").classList.remove("wipe-acitve");
37      });
38    } else if (slide.id === "slide_06_06_02") {
39      document.querySelector("#blue-wipes").classList.add("wipe-acitve");
40      blueWipes.play();
41      blueWipes.addEventListener("complete", () => {
42        document.querySelector("#blue-wipes").classList.remove("wipe-acitve");
43      });
44    }
45
46    anime({
47      targets: series,
48      scaleY: [0, 1],
49      duration: 667,
50      delay: delay + 333,
51      easing: "cubicBezier(.77,.27,0,.99)",
52      complete: function () {
53        animateStats();
54      },
55    });
56  };
57
58  if (!slide.className.includes("stop-animation")) {
59    animateInInit();
60  } else {
61    if (animationDirection === "animateIn") {
62      anime({
63        targets: series,
64        duration: 667,
65        delay: delay + 333 + 167,
66        translateY: [-25, 0],
67        opacity: [0, 1],
68        easing: "cubicBezier(0.17, 0.24, 0.06, 1.00)",
69      });
70      anime({
71        targets: footer,
72        duration: 667,
73        delay: delay + 333,
74        translateY: [-25, 0],
75        opacity: [0, 1],
76        easing: "cubicBezier(0.17, 0.24, 0.06, 1.00)",
77      });
78    } else {
79      anime({
80        targets: series,
81        translateY: [0, -50],
82        opacity: [1, 0],
83        ...fadeOutOptions,
84      });
85      anime({
86        targets: footer,
87        translateY: [0, -25],
88        opacity: [1, 0],
89        delay: 167,
90        ...fadeOutOptions,
91      });
92    }
93  }
94};