How to Webflow: Text reveal masking on scroll

[@nomainmenu]

Hey I just wanted to add something. So I did this on a new project of mine and it worked on Chrome/Firefox but not on Safari or on my phone so I asked a dev friend of mine and he told me to write “clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)” which fixed my issue so if you’re looking for that fix too then this should work.

[@pixelgeek]

Nice! I pinned this for others to see.

[@isabeledwards9139]

Thank you so much for this, totally fixed my safari issue too!

[@isabeledwards9139]

I've just checked my site on an iPad and for some reason this interaction isn't working, the text sections are all layered on top of each other and fixed through the entire page. It works on safari mobile, so not sure why it's different for iPad? Anyone else had this issue?

[@fabianmahnke]

unfortunately this trick isn't working for me as well...I exchanged the part of the code with the one you've mentioned. On Chrome it works well (so I don't think I've messed up something with the custom code) but on Safari it's still not working at all.

[@joeltasha1985]

legend. fixed my issue too. cheers

[@roving-camera_72]

Cool effect that was totally new to me and it was easy to do. Very nice tutorial.

[@VideoTest87]

Oh man. I was looking for something like this for a similar concept when I was doing my portfolio..... Thanks for this Nelson!

[@pixelgeek]

Glad to be of service 🙇🏽‍♂️👍😁

[@davidlira94]

dude... i mean... wow... you are the master

[@garethellison01]

Another cool well structured easy to follow vid! Always enjoy watching your tutorials. It seems you love what you do. Makes it wayyyyy more fun to learn! Thank you. 🙏🏼

[@johnleighdesigns]

ooh yeah good to know about this technique - nice to be aware of for potential effect!

[@pixelgeek]

Glad to help 🙇🏽‍♂️👍 what other tutorials should I do?

[@stevengunn2506]

Thank you for sharing Nelson!

[@pixelgeek]

My pleasure 😁🙇🏽‍♂️

[@stevengunn2506]

@@pixelgeek Nelson, I'm trying to find a video that you did, which I caught the start of a few days ago but didn't get to see it all. At the start you were talking about page transitions on a website when moving through the pages it looks like you don't leave the page, when in fact you do. Does that ring any bells? 🤔😀

[@Ajourneycalledblessed]

Hi Nelson, I’m about ready to decide not to continue with webflow if I don’t hear from customer service. It’s been nearly 2-weeks, and all I want to know is how to add an Instagram link to a pre existing Instagram slider, in a template I purchased. Like this is extreme. Nether the creator or a webflow agent has responded since. That’s a bit concerning when there are a whole lot of hosts waiting for our money.

[@ivanbadia3232]

Perfect, I was wondering how to use the CSS clip-to-path.

[@sergioariza7566]

This is awesome! Do you know if you can mask other elements besides text? Like images or animations.

[@pixelgeek]

maybe. try it out and report back :)

[@wecreate-studios]

Yes, i think you can mask everything inside the div. Workes with 2 Animations im using :)

[@joeltasha1985]

Cool video. I was looking for how to do something else but this was a pleasant surprise. Keen to see your portfolio if you would like to share.

[@mariorruiz]

Hi Nelson! Can you use this clipping with images? Like to make a before and after slider? But then horizontally

[@techstar4775]

Thanks for what you do man

[@pixelgeek]

Thanks for your support 🙇🏽‍♂️🙇🏽‍♂️🙇🏽‍♂️🙇🏽‍♂️

[@loremipsum720]

Great trick. Love your tutorials. Now I have a question for you about a "problem" I have in webflow, but it is not related to this particular tutorial. But still going to ask here :)> 1. I'm only starting to play with webflow, so be patient. 2. I want to create a website that I call "pseudo blog". It will be a series of "articles" (individual pages), but each of them is an invented design with their own theme, fonts and obviously CSS 3. Obviously, as I build each new page; and since they all are under the same website project, I keep adding new styles, pseudo-styles-graphics and sometimes fonts. 4. this makes a huge CSS and pretty complex to work with. Question: Is there a way to attach specific CSS to individual pages exclusive for that. I would have the general CSS with basic classes, and then each article would load their own CSS. I could do that if I treat every page as an independent project, but right now I have the Lite Plan, and I'm limited to only 10. I have the impression there is not other solution, but I thoiught I would ask. Please don't feel obligated to answer, I won't be offendede and I still will enjoy these tutorials. Thnaks

[@MichealBeaulieu]

Very cool!

[@raynalreyes4907]

So nice!

[@pixelgeek]

Thank you! 😊

[@joshhighburger8869]

Thank you SO MUCH for this sir, I greatly appreciate it! Gonna build this into my project posthaste 😁

[@pixelgeek]

Send me a link to the page you use this trick on 😁👍

[@joshhighburger8869]

@@pixelgeek Absolutely, will do! I've come back to revisit this part of the project and have hit a hurdle, I think. If I were to do this in a two-column (or multiple columns for that matter) fashion as MONO did on their site, would I have to take some element off of fixed positioning, or would it be additional div blocks and nesting? I can't seem to find how to juggle all the nesting quite right, the centered text masking looks amazing, but I'm stumbling on getting it to work anywhere but centered.

[@joshhighburger8869]

Hmm, also getting a ton of weird bugs with the text disappearing on mobile randomly

[@kirilradovenski4121]

@@joshhighburger8869 Hey Josh, I have similar problems, as text and whole sections disappear when opened on Safari and/or a Mac. Did you find any way to fix that?

[@b9.digital]

This code seems to not work anymore. I've checked on Webflow and found other examples that are showing the same issue I'm having, showing only text from the first row. Any ideas? 🙏

[@刘玄-q2b]

Fantastic! I've also imagined making this effect(without actually seen it) for my Portfolio, thought it would be easy and basic😂

[@ArchBeJeffers]

Could the CSS Clip be used in an interaction, as well? In case you wanted this to effect to be triggered by a page load and not by scroll.

[@MrInsider33]

I'm trying to get the same effect but inside an element. It is an Image. If I hover, I want an rectangle to come up from the bottom and cover the image, this works with overflow. In this rectangle there is text, but I don't want to move the text, it should appear as soon as the rectangle crosses it. It should be FIXED, but relative to the image, not the body and not the rectangle. Any ideas?

[@ajmaljoiya6006]

Great brother

[@spagbowlsparmacheese629]

This is cool are there any tutes similar to this where instead of words changing, a square mask changes shape on scroll?

[@pixelgeek]

thanks for watching :) I'm happy to add that to me queue. But i might forget. Can you please consider joining my community and posting your question on the project help board: chat.pixelgeek.community/c/project-help

[@mihaibadea1985]

Hey Man, I know you poste this a while ago but I just wanted to ask you for a solution. Clipping, apparently does not work that well in Safari. Do you have any Idea for a workaround ? thank you very much ! Your Content is absolutely sick !

[@benventura100]

hey dude amazing tutorial... fo me it dosnt work on mobil... any advice?

[@pixelgeek]

Hi :) Thanks for watching. If you need further assistance, please consider joining my community and posting your question on the project help board: chat.pixelgeek.community/c/project-help

[@timog9257]

i really like you, your a so kind and funny! keep rocking

[@olehansen6568]

Agree 100% and perfect length of tutorials. Right to the point and doesn't get boring. Keep up the good work Nelson.

[@pixelgeek]

Thanks! 🙇🏽‍♂️🙇🏽‍♂️🙇🏽‍♂️🙇🏽‍♂️♥️ I'm glad you are enjoying the videos.

[@mari-831]

Great, thx

[@pixelgeek]

My pleasure!

[@pierrickveya]

It doesn't work on mobile and tablet ... I don't understand. Any ideas? But thank you for your very nice tutorial!

[@ambrogiotacconi879]

It does work on Androids, but with iOS I've got the same problem, did you find a solution?

[@kateschlabaugh]

@@ambrogiotacconi879 trying adding this string of code into the HTML Embed block: @media screen and (-webkit-min-device-pixel-ratio:0) { .text-holder { clip: auto; -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%) } }

[@babusgabriel]

@@kateschlabaugh Thank you so much for this, I've had problems aswell but when I added the snippet above it worked perfectly!

[@benventura100]

@@kateschlabaugh thanks for that... it marks "mask-image" as a mistake? any explanation? thanks kaitlyn

[@SERGEY717]

Cool!

[@jacevans9705]

Awesome!

[@pixelgeek]

thanks for watching :)

[@jacevans9705]

@@pixelgeek eagerly awaiting your dropdown + text CMS search vids haha :)

[@AdolfoCasabal]

I think the webclipper is broken, it works very fuzzy for me !

[@melissanichols6096]

Hi Nelson, or should I say, UNCLEEEEEEE -w-

[@Enginerosemusic]

wow this is so cool bro..

[@lovejoysuan5198]

1:43 thank me later

[@birajpaudel054]

oh no my embed is not available. sad face

[@pixelgeek]

ah. you need to upgrade your account plan or add on a site plan to your project to get access to it. The reason why it's behind a paywall is because spammers and phishers used to use it on free account for bad things :(