Creating a Mouse Move Animation in Webflow

John
August 18, 2022

Have you ever seen a website that has a small element following the mouse cursor? Not only that but the element then changes when the user hovers over an element. Ever wondered how this was accomplished? In this video tutorial I go over how to create this effect with just a few steps in Webflow. No Code Required.

This project can be cloned for free at the following link: https://webflow.grsm.io/interaction?interaction=webdev-for-you-interaction-157.

Let’s get started!

Step 1: Add a section

  • Name the section “section.”
  • Set the display setting to flex, horizontal, align center, and justify center. This will place any elements in the section within the center (for demonstrating this demo).

Step 2: Add a div block in the section

  • Name it “image-wrapper.”
  • Set the width to 500px to 500px (can be any size as long as width and height are the same).
  • Add a background image.
  • Go to the hover state and set the border-radius to 50%. This will change the element from a square to a circle on hover. (Image needs to be a perfect square).
  • Go back to the “none” state and add a transition to the border-radius and set the speed to 500ms and the easing to “ease.” This will add a smooth transition to the animation on hover.

Step 3: Add another div block in the section

  • Name it “view-button.”
  • Set the display setting to flex, horizontal, align center, and justify center. This will place any elements in the section within the center.
  • Set the width and height to 100px by 100px.
  • Set the position to Absolute. This will place it in the center of the section.
  • Give it any background color.
  • Add a text block inside of this element. Name it “view-text.” Type anything here, and set the typography to anything you’d like as long as it fits in the circle. Text will be in the center because of the flex settings applied to the “view-more-button.”

Step 4: Create Mouse Move Interaction

  • Go to interactions and under “Page trigger” select “Mouse move in viewport.” Start a new animation and move the “view-button” -50vw at 0% on the x-axis and 50vw at 100% on the x-axis. Move the button -50vh at 0% on the y-axis and 50vh at 100% on the y-axis. This will have the button follow the mouse cursor on mouse move.

Step 5: Create hover interaction over images

  • Select the “image-wrapper” and add a hover interaction via the interaction panel.
  • For the hover in animation set the initial state of the “view-button” to a scale of .2.
  • Set the opacity of the “view-text” to 0% and set as the initial state.
  • Then scale the “view-button” back to 1 and set the opacity of the “view-text” to 100%. Drag and drop both these animations over each other so they start at the same time. Set the speed of both of these animations to .5s and an easing of “Ease.”
  • On the hover out animation duplicate the hover in animation. Then remove the initial state animation and set the scale of the “view-button” back to .2 and the opacity back to 0%. This will return the element to its original state on hover out.

Step 6: Add a piece of custom code

  • In order for the mouse cursor to bypass the element that’s following it and allow the cursor to interact with element on the page you will want to add the following code via the custom code section of the page or via an embed element:
  • <style>
    .view-button {pointer-events: none;}
    </style>

That’s it! You have no created a mouse move animation that interacts with images on the page!

To get started with Webflow click here: https://webflow.grsm.io/get-started.

As a photographer, it’s important to get the visuals right while establishing your online presence. Having a unique and professional portfolio will make you stand out to potential clients. The only problem? Most website builders out there offer cookie-cutter options — making lots of portfolios look the same.

That’s where a platform like Webflow comes to play. With Webflow you can either design and build a website from the ground up (without writing code) or start with a template that you can customize every aspect of. From unique animations and interactions to web app-like features, you have the opportunity to make your photography portfolio site stand out from the rest.

So, we put together a few photography portfolio websites that you can use yourself — whether you want to keep them the way they are or completely customize them to your liking.

12 photography portfolio websites to showcase your work

Here are 12 photography portfolio templates you can use with Webflow to create your own personal platform for showing off your work.

1. Jasmine