Mask Text Reveal Effects & Animations in Motion.page

Welcome to just another official video tutorial to Motion.page, which will show you how to make some pretty neat text masking effects, and animations in WordPress using a Motion.page plugin.

If you're new to Motion.page, check it out at https://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
04:37 - Editing in Motion.page
05:35 - Creating the second element
05:59 - Create second class
06:15 - Add custom CSS 2
08:02 - Editing in Motion.page
09:02 - Split Text
10:05 - Summary
10:18 - Outro