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

1import {delay, fadeOutOptions} from "./settings.anime.js";
2
3export const topTracksAnimation = (element, slide, animationDirection) => {
4  let bars = element.querySelectorAll(".highcharts-series rect");
5  let images = element.querySelectorAll(".img-wrap");
6  let text = element.querySelectorAll(".label-text-wrap");
7
8  let animateInInit = () => {
9    anime({
10      targets: bars,
11      scaleX: ["0%", "100%"],
12      opacity: [0, 1],
13      easing: "cubicBezier(0.00, 0.00, 0.15, 1.00)",
14      delay: anime.stagger(402, {start: delay}),
15    });
16
17    anime({
18      targets: text,
19      translateY: [100, 0],
20      opacity: [1],
21      duration: 1000,
22      delay: anime.stagger(402, {start: delay}),
23      easing: "cubicBezier(0.00, 0.00, 0.15, 1.00)",
24    });
25
26    anime({
27      targets: images,
28      opacity: [0, 1],
29      translateY: [-50, 0],
30      easing: "cubicBezier(0.00, 0.00, 0.15, 1.00)",
31      delay: anime.stagger(402, {start: delay}),
32      complete: () => {
33        slide.classList.add("stop-animation");
34      },
35    });
36  };
37
38  let animateIn = () => {
39    anime({
40      targets: bars,
41      translateX: [25, 0],
42      opacity: [0, 1],
43      duration: 667,
44      delay: anime.stagger(100, {start: delay + 333}),
45      easing: "cubicBezier(0.17, 0.24, 0.06, 1.00)",
46    });
47    anime({
48      targets: text,
49      translateY: [-25, 0],
50      opacity: [0, 1],
51      duration: 667,
52      delay: anime.stagger(100, {start: delay + 333}),
53      easing: "cubicBezier(0.17, 0.24, 0.06, 1.00)",
54    });
55    anime({
56      targets: images,
57      translateY: [-25, 0],
58      opacity: [0, 1],
59      duration: 667,
60      delay: anime.stagger(100, {start: delay + 333}),
61      easing: "cubicBezier(0.17, 0.24, 0.06, 1.00)",
62    });
63  };
64
65  let animateOut = () => {
66    anime({
67      targets: bars,
68      translateX: [0, 25],
69      opacity: [1, 0],
70      delay: anime.stagger(48),
71      ...fadeOutOptions,
72    });
73    anime({
74      targets: text,
75      translateY: [0, -25],
76      opacity: [1, 0],
77      delay: anime.stagger(48),
78      ...fadeOutOptions,
79    });
80    anime({
81      targets: images,
82      translateY: [0, -25],
83      opacity: [1, 0],
84      delay: anime.stagger(48),
85      ...fadeOutOptions,
86    });
87  };
88
89  if (!slide.className.includes("stop-animation")) {
90    animateInInit();
91  } else {
92    if (animationDirection === "animateIn") {
93      animateIn();
94    } else {
95      animateOut();
96    }
97  }
98};