​

​

We're adding new community library scripts each week. Let's take a look at some of them.

👾 An interactive swarm

Create a dynamic grid of squares that react to mouse movement, simulating a swarm-like effect (is it a swarm?). This code is the scaled back version of something we did for a client. We'll show you the finished experience once that projects launches.

Play with the example: https://slater-original.webflow.io/swarm​

Review the code: https://slater.app/projects/library-ncsco-largely-replaced-by-new-snippets/editor2​

​

​🌈 Refresh the page after form submit

Clear any form with a page refresh. Simple and useful.

​https://slater.app/community_library/refresh-after-form-submit-1bf16338-06b4-464d-b7ac-dab1f3a2f15b​

​

📏 Handle Resize

Optimize window resize handling by debouncing rerendering of elements.

​https://slater.app/community_library/handle-resize-6290e135-3d12-442b-9263-b939a8f328e5​

​

Not what you are looking for? Go check out the full Community Library.

Do you have useful scripts that the Webflow community could use? Let us know and we'll get them added.

​

Javascript 101: The mousemove Event

We've been creating an interactive experiences that leverages the mousemove event this week. It's the same project mentioned in the Interactive Swarm script. Take a look if you haven't (https://slater-original.webflow.io/swarm) and then let's run through a more basic example that can illustrate how to make an interactive expereince with the mousemove event.

For this example, let's create a simple game where you can move a box around the screen with your mouse!

First, we'll start with some basic HTML:

<div id="box"></div>

And add a bit of CSS to make it visible:

#box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
}

Now for the fun part - the JavaScript:

// Get our box
let box = document.getElementById('box');
// Listen for mouse movement on the whole page
document.addEventListener('mousemove', function(e) {
  // Move the box to where the mouse is
  box.style.left = e.clientX + 'px';
  box.style.top = e.clientY + 'px';
});

Here's what this code does:

• We find our box using document.getElementById('box').
• We tell the computer to listen for when the mouse moves anywhere on the page.
• When the mouse moves, we run a function that:
  • Sets the box's left position to where the mouse is horizontally (e.clientX)
  • Sets the box's top position to where the mouse is vertically (e.clientY)

The e in function(e) is like a package of information about the mouse movement (try logging it to the console). e.clientX tells us how far right the mouse is, and e.clientY tells us how far down it is. We add 'px' at the end because CSS needs to know we're talking about pixels.

And that's it! Now when you move your mouse around the page, the red box will follow it.

​

Your projects, supported by Slater

Tamir shared this beautiful Rivers project with us on Twitter. Check it out and give him a follow!

tamir @tamiryankevich 🚀 Project Launch spotlight: Big River Builders Stack: @Webflow + GSAP, via @Slater_App Check out the before and after below! Technical Webflow implementation collaboration with brand designer and friend Nikki Welty. 1:19 PM • Jun 17, 2024 0 Retweets 11 Likes Read 2 replies

​

​
​

​

Happy coding!

🤙 the Slater Team

​

If Slater helps you create better websites, please support the team behind it.