Unmask Sections While Scrolling in Webflow

View Resource at www.timothyricks.com/resource...
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

[@dude861]

This looks absolutely great on desktop AND on mobile phone. That's kinda overlooked sometimes in webdesign, that most people surf with their phones and some stuff looks great on a laptop but terrible on a phone. This is perfect for all sizes. Masterpiece.

[@vaib900]

Wow this is so great. I love the way you problem solve and come up with simple solutions. This didn't even require custom code. You are amazing and keep making such mind blowing tutorials. 🙌🙌

[@skyer1085]

Thank you for this wonderful tutorial Timothy! I discovered your channel a month ago and I have learned ALOT from your tutorials!

[@LenaHo]

You're the best!! Thanks for talking at a speed where we can follow without manually slowing down the video. No fluff, just steps. Can't wait to pop into the patreon. Thanks!

[@timothyricks]

Thanks so much for the kind words, Lena!

[@jelenajovanovic1472]

Thank you Timothy!!! You're the real Webflow wizard.

[@mfrapp20]

I actually did this by mistake when trying to accomplish a scroll snap on my portfolio site. That was just on one section tho so this is next level. Nice tutorial!

[@roeldekkers7451]

Just what i need! Thanks Timothy 🙌🏼

[@stevedowning4824]

Timothy Webflow GOAT 🐐

[@timothyricks]

Haha, thanks Steve!

[@des7638]

so COOL. Thank you Timothy

[@user-hj3yq4jh1q]

I’ve been looking for such a video for a while! Finally! Thanks ☺️

[@timothyricks]

So glad this helps! 😄

[@abie1295]

such great tutorial! thank you very much timothy!

[@brenomzy]

Awesome as always!

[@leeleefu2137]

Perfect timing :) Thanks men!

[@Francois3k]

Broo ur a css master Jesus i been try do that for weeks. U are the G.O.A.T man thank uuu. Keep up with fire content

[@timothyricks]

Thank you, Michael! Really glad to help! Will do

[@camali_ch]

This is wild! Thanks for sharing.

[@joshsimmo]

Great video! I have a question Tim if you don't mind - if you wanted the new section to enter with a rotate effect whilst scrolling into view, is that possible to use with the unmasking effect? presumably, you'd have to then change the spacer in the previous section and use full page wrapper with overflow hidden to keep it seamless? Hope that makes sense :)

[@adekoyaayodeji2369]

Thanks Timothy🙏 This I exactly what I needed atm

[@timothyricks]

So glad to hear that!

[@geoffdawes6529]

You're amazing Tim! Haha the amount of hours I spent trying to get this effect....

[@timothyricks]

Haha, thanks Geoff! Yeah, it can be a tough one

[@40ozTea]

great explanation

[@apachehelicopter7625]

Great stuff as usual!

[@timothyricks]

Thank you!

[@lens3641]

love this

[@BudaBozic]

AMAZING!!!!! THANK YOU!!!!

[@dobricamarincic]

thank you very much

[@user-gs8pi4hj5j]

Great tutorial! I was wondering what if I actually wanted the same overlapping effect on my footer and still be able to see all the content in it? I'm more specifically looking to create an entire page that has these overlapping effect on each section. Is it possible?

[@user-wq5xu6sp2d]

perfect

[@sltho]

Thanks

[@marcusfrancis24]

Thank you, this is great! Wondering if you could create a tutorial on CMS-fixed pop-up modals while disabling body scroll? - Similar to how you display projects on your site instead of making users travel to cms collection page. I'm curious what your advice would be to disable page body scroll while allowing for scroll within the fixed pop-up modal @95vh on longer CMS projects?

[@timothyricks]

Thanks Marcus! Good question. The popup is set to overflow scroll. I’m using the paid ScrollSmoother plugin from GSAP which has an option to disable page scroll that works on mobile. www.timothyricks.com/resource/gsap-scrollsmoother The collection page content is all being loaded in dynamically with Ajax when the user clicks. This saves time on initial page load by not having to load every page’s content on the homepage. www.timothyricks.com/resource/pulling-content-from-another-page-with-ajax

[@marcusfrancis24]

@@timothyricks Thanks for making that Ajax cloneable! Extremely helpful!

[@wisssse]

How does this work when you work with sections that don’t contain 100vh? Some of my sections are smaller than the screen size. Anyone an idea?

[@MohamedHassan-xf5wb]

Man you are amazing

[@timothyricks]

Thanks so much!

[@pablogday]

Sweet.

[@frankiejamieson3690]

Great tutorial

[@timothyricks]

Thank you!

[@cosminrus6571]

genius

[@JokerBrand7]

Hey @Timothy Ricks, i have an issue on my iPhone Safari browser. My Overlapping Section Background is transparent while scrolling down. When i stop scrolling down and start scrolling up, the background color (what is white) appears and everything looks like it should be. BUT i HAVE to scroll upwards one time otherwise i got this background color issue Any idea how to fix that?

[@khanayan-v7z]

Can we apply this animation on literally every niche website, or it's just appropriate for some industry niche websites or etc?

[@lwazixaba]

Is it possible to get these sections to move ever so slightly on scroll for a parallax effect?

[@charbelhajj7542]

Any workaround (maybe using interactions/GSAP ?) for keeping the footer sticky even if it becomes larger than 100VH? I'm thinking adding a "animate while scrolling" effect, and just have a relative footer move in from the top, which in theory could work, but wondering if there is a better more reliable way.

[@timothyricks]

Hi, yes there’s a way to do this with Webflow interactions. I made an updated video on it here. kzbin.info/www/bejne/h3iVYnStet2VZq8si=XA9ogi-YPpdT6O1k

[@AmiliusSylar]

I'm having trouble making this work on mobile for a section that's way longer than 100vh. Basically i want to make it so, it sticks 100vh from the bottom of the section wherever that may be (the section height is auto depending on the content being added in), then other sections continue to overlap as they approach from below it. Any ideas?

[@weezyf775]

sometimes Ill have a browser in the top left quarter for example. When using 100vh, how do you account for this?

[@jo69123]

could you make new videos about webdlow animations on the new UI?

[@markmarkovich8628]

For the life of me I cannot get the footer reveal to work. Followed all the steps and have been comparing to the cloneable. My footer still rises from the bottom instead of being revealed by the section above sliding up. Anyone else have this issue?

[@invisiblehandofadamsmith]

niceee

[@dhwanidasani984]

for me, it is working in preview but not on published site. Can someone help

[@TheJansidgwick]

small question. when i set the footer on -1 so the section before it covers it, all my links become unclickable. Do you have an idea what might have gone wrong?

[@TheJansidgwick]

never mind! did the tut again, and this time i didnt have the same problem. Cheers

[@SadmanPlays]

Damn I didn't understand this :(

[@curtispene3260]

Like seriously though does anyone actually know why that is happening?