There’s nothing like a burst of color to grab users’ attention. And it’s even more impactful when it’s interactive. In this video, discover how to create this stunning gradient change on scroll effect. And feel free to build along.
We’ll start by turning on Advanced sizing in the Inspector panel and setting the section’s height to 300vh.
Next, go to the Floating menu and create two rows within the section.
Let’s change the first row’s height to 100vh.
Okay, from the Layers panel, let’s drag a container into the cell and stretch it.
Time for some color. I’ll add this gradient video, which you’ll find in the Botanica library under Assets in the Add panel. We’ll stretch it out again.
Now let’s add our text logo, which you’ll find in the same place.
Align it to the center.
Next, we’ll add our transparent video. Let’s resize it. We’ll adjust the width to 500 pixels.
And align it to the center.
Okay, let’s rename our parent container to Pink so we can easily identify it later on.
Because we have a few containers within the first grid cell, I’ll select the cell I want to work with.
Now once I add a container, it becomes the child of that cell and not the container behind it. Let’s stretch it.
Now I just need to repeat the same steps for the green and orange containers, renaming them and ensuring all elements are the same size and in the same position.
Now that I’ve created my three containers, I can organize them in the layers panel by renaming them or switching their order.
To ensure our containers stay in the same place on scroll we’ll set the cell’s position to sticky.
Next, we’ll animate the containers so they appear seamlessly one after another on scroll.
Let’s set the green container to appear after the pink one and select the fade effect.
To get a smooth fade transition, adjust the animation area to between 37 and 50.
Now, I’ll add another scroll animation to the section.
Choose the orange container as the animated element that appears after the green one and select Fade.
Adjust the animation area to between 58 and 70.
Now, let’s check the design on different breakpoints. It’s optimizing nicely for tablet, mobile and desktop, so no need to change anything.
Finally, click Preview and scroll. There you have it, the gradient color change effect in full motion ready to grab some user attention.
Thanks for tuning in. To learn more about what you can do with Wix Studio, check out our other Academy tutorials.
