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

1import {delay} from "./settings.anime.js";
2
3export const lottieAnimation = (element, slide, animationDirection) => {
4  let callLottie = () => {
5    switch (element.id) {
6      case "watch":
7        animationDirection === "animateIn" ? watch.play() : watch.pause();
8        break;
9      case "casette":
10        animationDirection === "animateIn" ? casette.play() : casette.pause();
11        break;
12      case "rocket":
13        animationDirection === "animateIn" ? rocket.play() : rocket.pause();
14        break;
15      case "confetti":
16        animationDirection === "animateIn" ? confetti.play() : confetti.pause();
17      default:
18    }
19  };
20
21  if (element.id === "confetti") {
22    if (animationDirection === "animateIn") {
23      anime({
24        targets: element,
25        delay: 500,
26        duration: 500,
27        easing: "cubicBezier(0.17, 0.24, 0.06, 1.00)",
28        complete: () => {
29          callLottie();
30        },
31      });
32    }
33  } else {
34    if (animationDirection === "animateIn") {
35      anime({
36        targets: element,
37        opacity: [0, 1],
38        translateY: [10, 0],
39        delay: delay + 333,
40        duration: 667,
41        easing: "cubicBezier(0.17, 0.24, 0.06, 1.00)",
42        complete: () => {
43          callLottie();
44        },
45      });
46    } else {
47      anime({
48        targets: element,
49        opacity: [1, 0],
50        translateY: [0, -50],
51        delay: 0,
52        duration: 383,
53        easing: "cubicBezier(0.84,0.00,0.81,1.00)",
54        complete: () => {
55          callLottie();
56        },
57      });
58    }
59  }
60};