1 files changed, 40 insertions, 0 deletions
diff --git a/site/js/rive-animations.js b/site/js/rive-animations.js
new file mode 100644
index 0000000..3d281d3
--- /dev/null
+++ b/site/js/rive-animations.js
@@ -0,0 +1,40 @@
+document.addEventListener('DOMContentLoaded', function (event) {
+	const canvas = document.getElementById('canvas')
+  if(event?.target?.body?.clientWidth > 575) {
+    const r = new rive.Rive({
+      src: '/img/banner-bubbles.riv',
+      canvas: document.getElementById('canvas'),
+      autoplay: true,
+      stateMachines: 'State Machine 1',
+      onLoad: () => {
+        r.resizeDrawingSurfaceToCanvas()
+      },
+    })
+
+    canvas.classList.add('canvas-present')
+  }
+
+	addEventListener('resize', (e) => {
+		if (!e?.currentTarget?.innerWidth) return
+
+		if (Number(e?.currentTarget?.innerWidth) > 575) {
+      if(canvas.classList.contains('canvas-present')) {
+        return
+      }
+      
+			canvas.classList.remove('not_visible')
+			canvas.classList.add('canvas-present')
+      const r = new rive.Rive({
+				src: '/img/banner-bubbles.riv',
+				canvas: document.getElementById('canvas'),
+				autoplay: true,
+				stateMachines: 'State Machine 1',
+				onLoad: () => {
+					r.resizeDrawingSurfaceToCanvas()
+				},
+			})
+		} else {
+			canvas.classList.add('not_visible')
+		}
+	})
+})