Mask Text Reveal Effects & Animations in Motion.page

Here's the CSS from the tutorial:

.text-mask-lr{
display: inline;
background: linear-gradient(#FFF 0 0) 0 100% /var(--mask, 0) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255,255,255,0.1);
}
.text-mask-tb{
display: inline;
background: linear-gradient(to bottom, #FFF 0 0) 0 0 / 100% var(--mask, 0) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #FFF;
}

Timestamps:
00:00 - Intro
00:13 - Overview
00:50 - Creating the page
01:20 - Adding Sections
01:55 - Creating the first element
02:23 - Create first class
02:45 - Add custom CSS 1
05:35 - Creating the second element
05:59 - Create second class
06:15 - Add custom CSS 2
09:02 - Split Text
10:05 - Summary
10:18 - Outro

[Permaslug]

So helpful to see this stuff worked out! Thanks Luke and team <3

[Mazahaka]

Thank you! I hope to see more videos like that!

[DDesigner]

great tutorial. I look forward to more

[thebigbadman]

Would like to know how to stay on the section where the mask text is till the animation is done.

[Dragon]

Can this be done with an image like a png logo and whats revealed is another image filling inside the logo? Similar to a parallax scroll

[YusufErenIslim]

i have an issue and probably because of span part. But html tag of text is not span. How can I make it span like you do with code or Elementor?

[andreataddei]

I tried to add this effect using ELEMENTOR but when I make the scroll all the paragraph change the color, instead follow the single text line, how I can fix it? Thanks

[dh]

Why would my text go from left to right on all lines. Its not going line by line

[noelr]

Has anyone tried this and confirm it won't affect SEO? I want to use this but don't want Google to think I'm hiding text