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

1import {delay, panChart} from "./settings.anime.js";
2
3export const stackedAreaChartAnimation = (
4  element,
5  slide,
6  animationDirection
7) => {
8  let series = Array.from(
9    element.querySelectorAll(".highcharts-series .highcharts-area")
10  ).reverse();
11  let labels = Array.from(
12    element.querySelectorAll(".highcharts-label span")
13  ).reverse();
14  let labelContainer = element.querySelector(".highcharts-axis-labels");
15  let xAxisLabels = Array.from(
16    element.querySelectorAll(".highcharts-axis-labels text")
17  );
18  let chartRoot = element.querySelector(".highcharts-container");
19
20  let animateInInit = () => {
21    slide.classList.add("stop-animation");
22
23    anime({
24      targets: series,
25      easing: "linear",
26      duration: 500,
27      translateY: [
28        {
29          value: -30,
30          duration: 0,
31        },
32        {
33          value: 0,
34          duration: 1000,
35          easing: "cubicBezier(0.25,0.00,0.00,1.00)",
36        },
37      ],
38      opacity: [
39        {
40          value: 1,
41          duration: 333,
42          easing: "linear",
43        },
44      ],
45      delay: anime.stagger(150),
46      complete: function () {
47        panChart(chartRoot, 1033);
48      },
49    });
50
51    anime({
52      targets: labels,
53      duration: 983,
54      opacity: [
55        {
56          value: 1,
57          easing: "linear",
58        },
59      ],
60      delay: anime.stagger(300, {
61        start: 600,
62      }),
63    });
64
65    // Setting a base opacity of 0 on the texts themselves
66    // so we hide the container as the base opacity
67    anime({
68      targets: labelContainer,
69      opacity: 1,
70      duration: 1000,
71      easing: "linear",
72    });
73
74    anime({
75      targets: xAxisLabels,
76      duration: 333,
77      delay: anime.stagger(117, {
78        start: 666,
79      }),
80      opacity: [0, 1],
81      easing: "linear",
82    });
83  };
84
85  let animateIn = () => {
86    anime({
87      targets: [series, labels],
88      duration: 383,
89      opacity: [0, 1],
90      delay: delay + 383,
91      translateY: [-20, 0],
92      easing: "cubicBezier(0.17,0.24,0.06,1.00)",
93    });
94
95    anime({
96      targets: xAxisLabels,
97      duration: 383,
98      delay: delay + (383 + 383 / 2),
99      translateY: [-20, 0],
100      opacity: [0, 1],
101      easing: "cubicBezier(0.17,0.24,0.06,1.00)",
102    });
103  };
104
105  let animateOut = () => {
106    anime({
107      targets: [series, labels],
108      duration: 383,
109      opacity: [1, 0],
110      delay: 38,
111      translateY: [0, -50],
112      easing: "cubicBezier(0.84,0.00,0.81,1.00)",
113    });
114
115    anime({
116      targets: xAxisLabels,
117      duration: 383,
118      delay: 38 * 2,
119      translateY: [0, -25],
120      opacity: [1, 0],
121      easing: "cubicBezier(0.84,0.00,0.81,1.00)",
122    });
123  };
124
125  if (!slide.className.includes("stop-animation")) {
126    setTimeout(
127      () => {
128        animateInInit();
129      },
130      delay,
131    );
132  } else {
133    if (animationDirection === "animateIn") {
134      animateIn();
135    } else {
136      animateOut();
137    }
138  }
139};