https://billeteramango.com/src/js/rive-animations.js?13-01-2022

1const riveInstances = [];
2
3function inicializarRivesDeclarativos() {
4  const Rive = window.rive && window.rive.Rive;
5  const Fit = window.rive && window.rive.Fit;
6  const Alignment = window.rive && window.rive.Alignment;
7
8  if (typeof Rive === "undefined") {
9    return;
10  }
11
12  const riveElements = document.querySelectorAll("canvas[data-rive-src]");
13
14  if (riveElements.length === 0) {
15    return;
16  }
17
18  riveElements.forEach((canvas) => {
19    const src = canvas.dataset.riveSrc;
20    const artboard = canvas.dataset.riveArtboard;
21    const stateMachine = canvas.dataset.riveStatemachine;
22    const fitType = canvas.dataset.riveFit || "contain";
23    const alignmentType = canvas.dataset.riveAlignment || "center";
24
25    if (!src) {
26      return;
27    }
28
29    const fitValue = Fit && Fit[fitType] ? Fit[fitType] : fitType;
30    const alignmentValue =
31      Alignment && Alignment[alignmentType]
32        ? Alignment[alignmentType]
33        : alignmentType;
34
35    const config = {
36      canvas: canvas,
37      src: src,
38      fit: fitValue,
39      alignment: alignmentValue,
40      autoplay: true,
41    };
42
43    if (artboard) {
44      config.artboard = artboard;
45    }
46    if (stateMachine) {
47      config.stateMachines = stateMachine;
48    }
49
50    const r = new Rive({
51      ...config,
52      onLoad: () => {
53        r.resizeDrawingSurfaceToCanvas();
54      },
55    });
56    riveInstances.push(r);
57  });
58}
59
60function cleanUpRiveInstances() {
61  riveInstances.forEach((riveInstance) => {
62    if (typeof riveInstance.destroy === "function") {
63      riveInstance.destroy();
64    }
65  });
66  riveInstances.length = 0;
67}
68
69window.addEventListener("beforeunload", cleanUpRiveInstances);
70
71inicializarRivesDeclarativos();