Check out this section we made with the Wix Studio and Pantone web capsule. It feels super immersive because as you scroll, the images are moving at different speeds. In this video, I’ll show you how to create this effect. Feel free to build along if you like.
I’ll start by dividing my section into a three-column grid.
Add a 3 column grid
I’m going to go ahead and adjust the height now so it’ll be easier to add my images in later. Let’s go with a 1000px.
Make the section taller
To choose the size of the columns, I’ll click the section grid…
Set the columns sizes
Let’s go with 40% for the widest column, and then 30% for the other two.
Set the columns sizes
We want each element to cover the entire width of the column, so I’m going to resize them a bit.
Adjusting the size and position of the element
Then I’ll add the image that I want below this container and I’ll adjust the position and size here too.
Add the content
I’ll add more elements in the same way, and once I have all the elements that I want in this column, I’ll stack them.
All the elements in 1 column should be added to a stack
I’ll quickly add all of the content to the rest of the columns now too.
Add the content to all the columns
Done. I’ve now stacked all the elements in each column, and you can also see that I made one stack shorter than the others.
Finalize the sections set up
Next, I’ll make the section’s height shorter than the content inside the column. This creates the effect where more elements appear as we scroll. For my design, a viewport width of around 200 will work.
Set up the section’s height
Time to add the animations. In the first cell, I’ll select the stack… add a scroll animation…choose “out” as the animation type and select “move”.
Add a scroll move animation to the stack in the first cell
And now I’ll adjust it. I’ll set the angle to 0 degrees from the top, and the animation path will be 20 to 77. For the distance, I’ll put 48vw. I’m setting this up based on the preview and where I want my last element in the stack to be visible when the movement is ending.
Adjust the animation properties
Likewise for the stack in the second cell. I’ll just add the same animation.
Add a scroll move animation to the stack in the second cell
And now I’ll adjust it. I’ll set all the same properties as before, but this time the distance will be 29vw. That’s because this stack is shorter and it’ll create the illusion that they’re moving at a different pace.
Adjust the animation properties
Lastly, I’m adding the animation to the stack in the third cell
Adjust the animation properties
And here I’m setting almost the same properties as the first stack.
Adjust the animation properties
Nice, all set up on desktop—let’s move on to tablet. Here I only want 2 columns so it fits the smaller screen size better. So I’ll just hide the right one.
Adjust the design on tablet - hide the right column
I also want both columns to be the same size so I’ll set each one to 50%.
Set each column to 50%
I’ll increase the section’s size to 1800px, which is actually 234vw as you can see here when I change the units.
Adjust the section’s height
We’ll also need to make some tweaks to the animation. So for the first stack, I’ll change the distance to 55vw.
Adjust the 1 stack move animation distance property
And for the second stack, I’ll adjust the animation distance to 78vw. Perfect.
Adjust the 2 stack move animation distance property
All done with tablet, now onto mobile. We’ll set the section’s height to 200vw. Adjust the section’s height on mobile
Let’s check the animation properties of the first stack… I’ll adjust the distance to 50vw, that looks better. Adjust the animation properties of the first stack
And lastly the second stack’s animation properties… let’s increase the distance and adjust the animation area to end at 65. Now I’ll just see which distance fits here best… looks like 170vw will work. Adjust the animation properties of the second stack
And that’s it, our animation looks great. The columns are moving just like we want them to.
Preview
For more build-along videos like this, check out Wix Studio Academy.
.jpg)
