Magical Wand Wipe Webflow Interaction

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

This magical wand wiping interaction as seen on diagram.com offers some great learning opportunities in building a beautiful "mouse move over element" interaction in Webflow. The whole Website is a master class in Webflow interactions I'm hoping to do a few lessons on!

Marco Cornacchia

Watch the Tutorial on YouTube Get the Project Cloneable

Magical Wand Wipe Webflow Interaction

Inside <head> tag

Inside </body> tag