>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

Support the Hairy Eyeball

Share this on