diff options
| -rw-r--r-- | src/js/mouseblob.js | 8 |
1 files changed, 6 insertions, 2 deletions
diff --git a/src/js/mouseblob.js b/src/js/mouseblob.js index 019a2ffa..db755edd 100644 --- a/src/js/mouseblob.js +++ b/src/js/mouseblob.js @@ -28,23 +28,27 @@ // } window.onpointermove = event => { - // The event object gives us the x and y coordinates of the mouse pointer const { pageX, pageY } = event; + // Get Initial Momentum const momentumX = pageX + pageX - blob.offsetLeft; const momentumY = pageY + pageY - blob.offsetTop; + // Move to momentem offseted position + blob.animate({ left: `${momentumX}px`, top: `${momentumY}px` }, { duration: 1500, fill: "forwards" }); + + // Move/Bounce back to initial mouse after momentum blob.animate({ left: `${pageX}px`, top: `${pageY}px` }, { duration: 1000, fill: "forwards" }); - // We can then use these coordinates to position the blob + // Set Default Initial position for blob / fix safari as the animate don't presist(it don't care about fill forwards) blob.style.left = `${pageX}px`; blob.style.top = `${pageY}px`; } |