There’s this nice color reveal effect on the Wix Studio home page that really emphasizes the headline.
I’ll show you how to recreate it, so feel free to build along.
Alright, starting from blank here.
First thing, we’ll go to the Add panel and bring in a container.
Then head to the Inspector panel, and align it to the top left.
Next I want to switch to advanced sizing.
And give this a hundred percent width, and a hundred viewport height.
Now grab an image from your media. Drop that into the container and then stretch it.
I’ll add the first bit of text…type in whatever headline you want here.
Change the size, 100 should do it.
Make it white and choose your font.
Great, lets duplicate that. We’ll add our next line.
Duplicate again. And for this one, let’s make the color dark gray.
Then place these two on top of each other.
Next, I want to select them both. I’ll do that from the Layers panel. Hold Shift to select, then place them in a container. And let’s move the white text back on top by dragging it above the gray.
Okay. We’ll duplicate this text again, and repeat those steps to set up our third line.
Done. Next, we select the two containers and the top headline, and stack them.
Get rid of any spacing in between…make this zero.
And I’ll dock the stack to the bottom and left…setting both these margins to 5%. [pause] Looks good.
Now, select the container we added at the beginning, and set its Position type to Sticky.
Then select the section and switch on Advanced sizing.
Make this section 150 viewport height. This’ll make that sticky effect we just set for the container visible while we scroll.
Now we’ll add a scroll animation to the section.
Choose which element to animate from the canvas—so select this white text element.
Go for the Reveal effect. And, I’ll adjust it.
Set the direction so it’s from the left. And, I want this animation to start as soon as you start to scroll down the page. This red line is telling me where the start of the section is on screen. So we’ll start the animation there—at 40%. And end at 50.
I’ll go back now and add the next one. Add another scroll effect…
…and this time choose the third line of text. Reveal effect again, adjust it.
Go from the left. And this time, the animation should start right when the first one ends. So go from 50%, and end at 60%.
All set up now. So go to Preview….and there it is. Working nicely.
Last thing is to make sure it looks this good on every device. So on mobile, we’ll change things slightly.
Move this up a bit.
And I want my text a bit bigger…let’s say 40.
Little trick here, I can select both of the overlapping text elements to change their size together.
And same with the next one.
We want to use a different animation for mobile. I’m going to remove this one and add an entrance animation instead. Adjust it to go from the left…
And same thing for the bottom text element…for this one we’ll add a 1.2 second delay as well.
Alright. Last little tweaks here. Select the container and change the Position type from Sticky back to default.
Change the section height to 100 viewport height, so it’s the same as the container. And we’ll just make sure this text is aligned vertically.
Preview again. There’s our entrance animation on mobile…and we’ve kept that scroll animation on desktop.
And there you go, that’s how we did the Studio headline effect.
Thanks for watching. Check out more tutorials like this in the Wix Studio Academy.
