How to Use Mouse Move Interactions in Webflow

Step 1: Setting Up Your Webflow Project

First, ensure you have a Webflow project. Sign up for a free account on Webflow if needed, then create a new project. In the dashboard, click on "New Project," choose a template or start with a blank page, and name your project. Inside the Webflow Designer, you'll find the canvas on the right and the elements panel on the left.

Step 2: Adding Elements to Your Canvas

To start with mouse move interactions, add elements like images or text that you want to animate. Drag and drop a Div Block or any desired element from the elements panel onto your canvas. Adjust its size and position by clicking and dragging the edges or corners. Add more elements if you want a complex interactive effect, such as multiple Div Blocks.

Step 3: Creating the Mouse Move Interaction

With your elements in place, it's time to create the mouse move interaction. Select the element you want to animate, then open the Interactions panel (lightning bolt icon) on the right side. Click the "+" button to add a new interaction and choose "Mouse Move in View." Give your interaction a name for future reference.

Step 4: Setting Up the Animation

Set up the animation for what happens when the mouse moves over the element. After naming your interaction, you'll see a timeline divided into "While Mouse is in View" and "Mouse Move Out of View." Click "While Mouse is in View" to start adding animations. Use the "Add Action" button to select an effect like "Move," "Scale," or "Rotate." For example, select "Move" if you want the element to shift slightly with cursor position. Adjust the X and Y sliders to define movement. Preview the effect and tweak the sliders until the movement looks right.

Step 5: Testing Your Interaction

Test your interaction to ensure it functions as intended. Click the "Preview" button at the top left of the Webflow Designer. Move your mouse around the canvas to see the element's response. If the animation needs adjustment, return to the Interactions panel and modify it as needed.

Step 6: Adding More Complexity

For advanced designs, layer multiple interactions for a richer experience. Repeat the interaction creation process for other elements by selecting them and creating unique interactions. Combine different types of actions within mouse move interactions to create a cohesive site experience.

Step 7: Publishing Your Website

After perfecting your mouse move interactions and overall design, publish your website. Click the "Publish" button in the upper right corner of the Webflow Designer. Choose your domain or a Webflow subdomain for publishing. Once published, view your website in a browser to check the live mouse move interactions.

Conclusion

Mouse move interactions can greatly enhance the interactivity and visual appeal of your Webflow site. By following these steps, you can design engaging animations that respond to user movements, keeping visitors engaged with your content. Experiment with various effects and elements to discover what suits your website best, and enjoy the creative possibilities Webflow offers.