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

1import {delay, fadeOutOptions} from "./settings.anime.js";
2
3export const maskInAndCountNumbers = (element, slide, animationDirection) => {
4  let finalNumber = element.innerHTML.replace(/,/g, "");
5  let fromNumber = finalNumber - 100;
6
7  if (animationDirection === "animateIn") {
8    anime({
9      targets: element,
10      innerHTML: [fromNumber, finalNumber],
11      translateY: [75, 0],
12      opacity: [0.6, 1],
13      round: true,
14      duration: 1000,
15      delay: delay + 333,
16      easing: "cubicBezier(0.17, 0.24, 0.06, 1.00)",
17      update: function (a) {
18        const value = a.animations[0].currentValue;
19        const formattedNumber = numberWithCommas(value);
20        element.innerHTML = formattedNumber;
21      },
22    });
23  } else {
24    anime({
25      targets: element,
26      translateY: [0, -75],
27      opacity: [1, 0],
28      ...fadeOutOptions,
29    });
30  }
31};
32
33export const maskInText = (element, slide, animationDirection) => {
34  if (animationDirection === "animateIn") {
35    anime({
36      targets: element,
37      translateY: [100, 0],
38      opacity: [1],
39      duration: 1000,
40      delay: delay,
41      easing: "cubicBezier(0.17, 0.24, 0.06, 1.00)",
42    });
43  } else {
44    anime({
45      targets: element,
46      translateY: [0, -25],
47      opacity: [1, 0],
48      ...fadeOutOptions,
49    });
50  }
51};
52
53export const maskOutMediaBlinds = (element, slide, animationDirection) => {
54  const svgPath1 = element.querySelectorAll(".cls-2");
55  const animationWrapper = element.querySelectorAll(
56    ".animation__wrapper .media"
57  );
58
59  const blind = anime.timeline({
60    duration: 1500,
61    easing: "easeInOutQuart",
62  });
63  blind.add({
64    targets: animationWrapper,
65    translateY: [700, 0],
66    opacity: [0, 1],
67  });
68  blind.add(
69    {
70      targets: svgPath1,
71      strokeWidth: [8, 0],
72    },
73    500
74  );
75
76  if (animationDirection === "animateIn") {
77    setTimeout(() => {
78      blind.play();
79    }, delay);
80  } else {
81    anime({
82      targets: animationWrapper,
83      translateY: [0, -30],
84      opacity: [1, 0],
85      ...fadeOutOptions,
86      complete: () => {
87        anime({
88          translateY: [0],
89          opacity: [1],
90          delay: 383,
91          easing: "linear",
92        });
93      },
94    });
95    anime({
96      targets: svgPath1,
97      strokeWidth: [0, 8],
98      ...fadeOutOptions,
99    });
100  }
101};
102
103export const maskInMultiText = (element, slide, animationDirection) => {
104  let elements = element.querySelectorAll(".mask-wrapper .mask-multi-text");
105  if (animationDirection === "animateIn") {
106    anime({
107      targets: elements,
108      translateY: [23, 0],
109      opacity: [0, 1],
110      duration: 667,
111      delay: anime.stagger(333, {
112        start: delay + 333,
113      }),
114      easing: "cubicBezier(0.17, 0.24, 0.06, 1.00)",
115    });
116  } else {
117    anime({
118      targets: elements,
119      translateY: [0, -25],
120      opacity: [1, 0],
121      ...fadeOutOptions,
122    });
123  }
124};