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

In this webflow tutorial, Jonas Arleth shows how to create a three-column scrolling animation. It starts with inspiring and setting up the animation. He then explains how to set sticky elements and adjust the height and width of the elements. He then shows how to position the images with Flexbox and Position Absolute and create a stacking effect. Then it's time to position the content area and add Overflow Hidden. Finally, the animations for the titles, the images and the content area are fine-tuned.

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

Webflow Tutorial: Master three-column scrolling animations like a pro!

This type of animation can be a great addition to various web projects and adds interesting visual dynamics.

Project preparation

Before we start, I've prepared the entire project in Webflow and packed it into a separate section. This allows you to clone the project for free and adapt it to your needs by replacing images and texts. I've also included dummy content to make the process easier.

Structuring the elements

To create the scroll animation, I've divided the section into three main areas: the Column Scroll Wrapper, the Column Scroll Sticky, and the Column Scroll Content. The wrapper defines the length of the animation while the sticky area remains fixed at the top. The content area contains the images and text that are animated while scrolling.

Adjustment of sizes and positions

To make sure that the elements are at the right sizes and positions, I have made various settings. The sticky area and images were set to a fixed height of 100 VH.

Animation creation

I carried out various steps for the actual animation. First, I positioned the images so that they are evenly distributed over the entire sticky area with absolute position. I then created a scrolling animation that reduces the sticky area and gradually fades in the images and text.

Fine-tune the animation

To make sure that the animation runs smoothly, I've made various adjustments. I adjusted the speed and timing of the movements of the individual elements to achieve a harmonious effect. I've also adjusted the positioning of the text to ensure a smooth transition.

conclusion

Creating a three-column scroll animation in Webflow opens up a variety of ways to make your website visually appealing. 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 best suits your project!