Master This Famous 3-Column Scroll Animation in Webflow (+ Free Cloneable)

Learn how to build one of the most eye-catching scroll animations in Webflow — the famous 3-column scroll effect, inspired by award-winning websites. In this step-by-step tutorial, I’ll walk you through the entire setup, from structure to animation timing, including sticky elements, Flexbox layout tricks, and fine-tuned motion.

Perfect for designers who want to add visual impact to their Webflow projects — without writing a single line of code.

‍Free Cloneable Project included – so you can follow along or reuse it in your own projects.

Inspired by: https://aim.obys.agency

Webflow Tutorial: Master Three-Column Scroll Animations Like a Pro!

This type of animation can be a great addition to various web projects and adds an engaging visual dynamic.

Preparing the Project

Before we get started, I’ve set up the entire project in Webflow and placed everything inside a dedicated section. This allows you to clone the project for free and customize it to your needs by replacing images and text. I also included some dummy content to simplify the process.

Structuring the Elements

To create the scroll animation, I divided the section into three main parts: the Column Scroll Wrapper, the Column Scroll Sticky, and the Column Scroll Content. The wrapper defines the overall scroll length of the animation, while the sticky section stays fixed at the top. The content area holds the images and text that will be animated while scrolling.

Adjusting Sizes and Positions

To make sure the elements have the correct sizes and positions, I configured various settings. The sticky section and the images were set to a fixed height of 100 VH.

Creating the Animation

For the actual animation, I followed several steps. First, I positioned the images with position: absolute so they are evenly distributed across the entire sticky section. Then I created a scroll animation that gradually shrinks the sticky area and fades in the images and text.

Fine-Tuning the Animation

To ensure the animation runs smoothly, I made several adjustments. I fine-tuned the speed and timing of each element’s movement to create a harmonious effect. Additionally, I adjusted the positioning of the text to ensure a seamless transition.

Conclusion

Creating a three-column scroll animation in Webflow opens up a wide range of possibilities for making your website visually engaging. By structuring the right elements, adjusting sizes, and fine-tuning the animation, you can achieve impressive results. Experiment with different settings and find out which animation works best for your project!