This blur effect that highlights your text-bit by-bit can be an effective way to draw attention to your message. I’ll show you how to recreate it, feel free to build along.
Let’s start with a blank section. First thing, will give ourselves plenty of height for the scroll.
Then change the background. We’ll go with a linear gradient.
And set the angle to zero.
You can change up the colors however you like—I’m using this purple.
Great. Now I’ll drop in some text…and drag it wider.
Again, pick any font you like. I’m using this one I installed earlier.
We’ll make the font bigger and center the text,
and now we’re ready to add the first scroll animation.
We want the blur effect.
Let’s make the blur more intense—bring it up to 20. We also want to be able to read the text just before it reaches the middle of the screen. So we’ll change the animation area to end at 40 percent.
So, we’ve set it to go from blurry to clear as the text enters the screen. The next thing is to get it to blur again as the text leaves the screen. To do that, I’ll place the text in a container.
And add a second scroll animation to the container. This time, we’ll change the animation to move “From its design.”
We want the blur effect again, with the intensity at 20. And we’ll set the animation area from 60 to 100 percent. With both of these animations applied, the text is in focus between 40 and 60 percent of the way up the screen, and it blurs the rest of the time.
Once we add multiple lines of text, we’ll really get the full effect. So we’ll duplicate the container and place it under the first one.
Then we want to select both containers and stack them.
Select the second container here, and duplicate it another few times. Each new container automatically gets added to the Stack, and has the animations we added earlier. No need to add them again—which really speeds things along.
I want to make sure the spacing between each line is even. So I’ll select the Stack. Let’s make the item spacing 10…oops, too big. I want pixels. There, 10 pixels.
And the last thing to do here is go in and change the text.
There we go…
Let’s preview the full effect…our text blurs in and out as we scroll. Looks great.
Thanks for watching. To learn more about what you can do on Studio, check out the Wix Studio Academy.
