Discover the best mousemovement websites created by professional designers. Get inspired and start planning your perfect mousemovement web design today!

Hi everyone !

Because everyone was wondering (or maybe not), I made a website to decide which was better between pizza and burger. 
(But it was mainly to design a mouse move animation 😁)

Vote for your favorite, and feel free to clone or like the project if you enjoyed it!

Pizza VS Burger

In celebration of cross-site copy/paste! - Pre-built elements and interactions for use on new projects. Film 4 style page transitions. Thanks for looking! :-)

Artefact

Webflow

A 3d transforms interaction based on mouse position. 

Learn how to build this https://university.webflow.com/lesson/rotation-on-mouseover-interactions

Rotation on mouseover

Experimental fan art using divs and svgs with mouse movement and scroll interactions. Great on desktop but too heavy for mobile... Thanks for looking!

Sky Box

Trying out remaking and animating this shot done by me: https://dribbble.com/shots/5366442-Minimal-Portfolio-Exploration

*Done for learning purposes, clients are not real.
Let me know what you think.

Minimal Portfolio

Minimal Mouse Portfolio

Exercise parallax atmosphere

Last Update 2023-03-31

Parallax Exercice

Magnetic Background

Apple changed its homepage for a short period to support International Women's Day. To make it special, I recreated it and replaced some of the images with the women in my life. You can compare it to the original here:

https://web.archive.org/web/20200309051055/https://www.apple.com/

It's not a perfect replication, for instance, Webflow's mouse move interaction doesn't translate to mobile. But I'm happy to hear suggestions on how to improve it. 

Regardless, feel free to clone and make it your own!

Apple - International Women's Day

Apple International Women's Day 2020

Master Flowmaker

Full Grid on Mouse Movement

Inspired by @marioecg

097 - 100 days of @webflow interactions

#97 Full Grid on Mouse Movement

Watch the tutorial at https://www.patreon.com/posts/68438340

Velocity

Velocity-Based Interactions

Let's rebuild the trailing grid mouse follow effect as seen on https://thisisdash.com/ with p5.js. Learning how to make this delightful animation can teach you a lot about Javascript and inspire other effects to help you build eye catching websites!

Tutorial: https://youtu.be/bI6v2DgpZwM

Award Winning Grid Trail Mouse Follow Effect

Hi my gorgeous friends of Webflow!

Have you ever tried to embed an HTML canvas into your projects? By playing a bit with Java Script, you can use it to add a fancy cursor tracking effect to your websites! :)

Enjoy, and feel free to leave a comment!

Have an awesome Webflow journey y'all,

Francesco

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Canvas Cursor Tracking

OGL (lite version of webGL)

https://github.com/oframe/ogl

ogl-mousemove

ogl mousemove effect

In this video we will explore creating a mouse follow trail effect with images. We'll use p5.js for our code and I'll show you how to load it up in Webflow to use as a cool hero section too!

Image Trail

Welcome to Daily Interaction #133.

This demo showcases a parallax card animation on mouse move.

With this effect a card rotates on mouse move, and the image inside the card rotates and moves as well to create the effect of the image moving inside of the card. A caption also appears when hovering over the card. The card is in a 3d-wrapper with a child perspective applied to it to give the card a 3d effect as it moves.

Inspired by: https://codepen.io/andymerskin/pen/XNMWvQ

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev for You - Daily Interaction #133

WebDev For You - Daily Interaction #133

text outline animation fixed

Fixed  Text Stroke Animation

three.js and vanta.js  :)

You can edit:
  skyColor: 0x5eb7d9,
  cloudColor: 0xb1c2dc,
  cloudShadowColor: 0x1b3a57,
  sunColor: 0xff9c21,
  sunGlareColor: 0xfa6331,
  sunlightColor: 0xfa9531

https://github.com/tengbao/vanta/tree/master/dist

Interactive Sky

Interactive sky

Playing around with creating a fold out A5 card on the web. Using mouse movement and absolute positioning with a simple x-axis mouse movement interaction. All images can be found @jacob.robinson.

Fold out test

fold-out-test

Watch the tutorial at https://www.youtube.com/watch?v=BNVSkKtHuns

Based on https://isabelmoranta.com/

Discover mousemovement websites built by the Webflow community

Discover mousemovement websites built by the Webflow community