Grid Zoom While Scrolling

[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 interaction creates a grid zoom while scrolling effect in Webflow. These grid scroll animations are a great way to feature gallery content like portfolio work or products.

Watch the Tutorial on YouTube Get the Project Cloneable

Grid Zoom While Scrolling

Inside <head> tag

Inside </body> tag