Build an animated split-scroll layout

Learn how to build an animated split-scroll layout where each side grows, shrinks, scrolls independently on Hover. In this short tutorial, we'll set up a full-screen CSS grid, drop flexbox sliders into each panel, populate both sides with content, and wire up smooth Hover animations using Scale and Translate. Use this technique to create bold editorial sections that feel alive and interactive.

Build a split-scroll layout in Wix Studio where hovering over one panel makes it expand while the other one shrinks. In this Studio Byte, learn how to set up a full-screen CSS grid, drop a flexbox slider into each cell, and fill both sides with content. Then, add Hover animations using Scale and Translate so each panel reacts independently as users move their cursors across the screen. The result is a bold, editorial layout that offers an interactive experience—without writing a single line of code.