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

1import {delay, fadeOutOptions} from "./settings.anime.js";
2
3export const bubbleChartAnimation = (element, slide, animationDirection) => {
4  let series = Array.from(element.querySelectorAll(".highcharts-point"));
5  let labels = Array.from(element.querySelectorAll(".highcharts-label text"));
6
7  const interval = 8;
8  let svgLines = "";
9
10  for (let i = 20; i <= 520; i += interval) {
11    svgLines += `<line class="cls-2" x1="${i}" y1="0" x2="0" y2="${i}"></line>`;
12  }
13
14  let patterns = "";
15  series.forEach((item, index) => {
16    item.style.fill = `url(#diagonalHatch-${index})`;
17    patterns +=
18      `<pattern class="diagonalHatch" id="diagonalHatch-${index}"  width="1" height="1">` +
19      `<circle cx="50" cy="50" r="1000" fill='#FFC641' />` +
20      `<g>` +
21      svgLines +
22      `</g>` +
23      `</pattern>`;
24  });
25
26  document.getElementById("patterns").innerHTML = patterns;
27
28  let animateInInit = () => {
29    if (!slide.className.includes("stop-animation")) {
30      slide.classList.add("stop-animation");
31    }
32    setTimeout(() => {
33      let animation = anime.timeline({
34        targets: labels,
35        opacity: [0, 1],
36        easing: "cubicBezier(0.83, 0.00, 0.17, 1.00)",
37        delay: (el, i) => {
38          return i * 200;
39        },
40      });
41      animation.add({
42        targets: series,
43        scale: [0, 1],
44        easing: "cubicBezier(0.00, 0.00, 0.13, 1.00)",
45        delay: (el, i) => {
46          return i * 200;
47        },
48      });
49      animation.play();
50      anime({
51        targets: blinds,
52        strokeWidth: [10, 0],
53        easing: "cubicBezier(0.00, 0.00, 0.13, 1.00)",
54        delay: 0,
55        delay: (el, i) => {
56          return i * 4;
57        },
58      });
59    }, delay);
60  };
61
62  let blinds = Array.from(document.querySelectorAll(".diagonalHatch .cls-2"));
63  if (!slide.className.includes("stop-animation")) {
64    animateInInit();
65  } else {
66    if (animationDirection === "animateIn") {
67      anime({
68        targets: series,
69        duration: 667,
70        delay: delay + 333,
71        opacity: [0, 1],
72        translateY: [-50, 0],
73        easing: "cubicBezier(0.17, 0.24, 0.06, 1.00)",
74      });
75      anime({
76        targets: labels,
77        duration: 667,
78        delay: delay + 333,
79        opacity: [0, 1],
80        translateY: [-50, 0],
81        easing: "cubicBezier(0.17, 0.24, 0.06, 1.00)",
82      });
83    } else {
84      anime({
85        targets: series,
86        opacity: [1, 0],
87        translateY: [0, -50],
88        ...fadeOutOptions,
89      });
90      anime({
91        targets: labels,
92        opacity: [1, 0],
93        translateY: [0, -50],
94        ...fadeOutOptions,
95      });
96    }
97  }
98};