add support for safari

2 files changed, 45 insertions, 10 deletions

diff --git a/public/js/mouseblob.js b/public/js/mouseblob.js
index c0ecec30..69cbacac 100644
--- a/public/js/mouseblob.js
+++ b/public/js/mouseblob.js
@@ -1,13 +1,15 @@
 "use strict";
 
 window.onpointermove = function (event) {
-  var pageX = event.pageX,
-    pageY = event.pageY;
+  var x = event.pageX;
+  var y = event.pageY;
   blob.animate({
-    left: "".concat(pageX, "px"),
-    top: "".concat(pageY, "px")
+    left: "".concat(x, "px"),
+    top: "".concat(y, "px")
   }, {
     duration: 1000,
     fill: "forwards"
   });
+  blob.style.left = x + 'px';
+  blob.style.top = y + 'px';
 };
\ No newline at end of file
diff --git a/src/js/mouseblob.js b/src/js/mouseblob.js
index 71fdd631..4b30a80a 100644
--- a/src/js/mouseblob.js
+++ b/src/js/mouseblob.js
@@ -9,10 +9,43 @@
 //     }, { duration: 1000, fill: "forwards" });
 // }
 
-window.onpointermove = event => { 
-    const { pageX, pageY } = event;
-    blob.animate({
-        left: `${pageX}px`,
-        top: `${pageY}px`
-    }, { duration: 1000, fill: "forwards" });
+// window.onpointermove = event => { 
+//     const { pageX, pageY } = event;
+//     blob.animate({
+//         left: `${pageX}px`,
+//         top: `${pageY}px`
+//     }, { duration: 1000, fill: "forwards" });
+// }
+
+// window.onpointermove = event => { 
+//     var x = event.pageX;
+//     var y = event.pageY;
+
+//     // We can then use these coordinates to position the blob
+//     blob.style.left = x + 'px';
+//     blob.style.top = y + 'px';
+// }
+
+
+window.onpointermove = event => {
+        // The event object gives us the x and y coordinates of the mouse pointer
+        var x = event.pageX;
+        var y = event.pageY;
+    
+        blob.animate({
+            left: `${x}px`,
+            top: `${y}px`
+        }, { duration: 1000, fill: "forwards" });
+    
+        // We can then use these coordinates to position the blob
+        blob.style.left = x + 'px';
+        blob.style.top = y + 'px';
 }
+
+// window.onpointermove = event => { 
+//     const { pageX, pageY } = event;
+//     blob.animate({
+//         left: `${pageX}px`,
+//         top: `${pageY}px`
+//     }, { duration: 1000, fill: "forwards" });
+// }