Unmask Sections With Webflow Scrolling

Get the cloneable for this project (affiliate link)
webflow.grsm.i...
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.i...

[@framerprojects]

Wow! Finally an easy to understand and super re-useable tutorial on parallax scroll sections! Would love to give you 10 thumbs up if that was possible!

[@MDShakil-un5ug]

If you want learning something unique this channel gives you. I am always waiting for your new video about learning new something.Thanks Timothy 💚

[@staticmotion1628]

This is great for guys like me Timothy guys who's brains can't comprehend code at all but love building sites in webflow with native tools lol so Thank you so very much love your channel even tho lots of times i don't understand but i always learn something

[@timothyricks]

I’m so glad this helps! Thank you for watching!

[@Aorta_inc]

You’re a legend, Tim.

[@DavidPeyrouty]

Timothy, you're just a genius!!! I don't understand why you have so few thumbs when you have a staggering number of subscribers... Like others, I wish I could give you 1k thumbs up! Keep on delighting us, and thank you for sharing such knowledge with us. You make everything seem so much easier, it's crazy!

[@marijanastojanovic198]

Thank you for sharing such valuable content :)

[@gabrielgomes5340]

Thank you for another awesome tutorial!! And happy new year 🤗

[@23kroox23]

Thank you Timothy for another great video! Usually I watch tutorials on YT in 2x speed, but your videos are so pro, straight forward and without any unecessary content that 1x is just perfect :D Btw. what font have you used for headings inside of this projects? It's really nice!

[@timothyricks]

Thanks so much! I think I've conditioned my brain to learn better when watching 2x speed. 😂The font is Cirka from Pangram Pangram Foundry

[@MichaelJohnBurns]

Thanks Tim.

[@Ellonirie]

Tim, you are the best! you really hit the point what is currently trend and if you were my professor at the university, I could have been a rocket engineer by now.

[@timothyricks]

Haha, thank you so much!!

[@Ellonirie]

Just a small suggestion/fix for longer pages. The scrolling animation from the bottom would work when .scroll_wrap has position relative.@@timothyricks

[@mw5145]

I love your style and that is why I leave here my comment

[@junipersmith2578]

Love it! Thanks!

[@CarmenHope-x9y]

Thanks for the video❤

Hey Timothy! I used the "scroll-wrap" for the section below the Hero Section, and it works great! However, I have a button on the Hero section linked to the anchor of the section below (to scroll on click), but for some weird reason it only scrolls halfway. I know it has something to do with the positioning of -50% of the animation, but I do not know how to fix it! Could you help me out? THANKS!

[@Diego_Cabrera]

Another banger!

[@timothyricks]

Thank you, Diego!

[@Bars_Sl]

Wonder how to calc trigger space while having sticky nav, because the top of Unmasked section is overlapped by sticky element, never being fully visible. Tall Footer in particular on small mobile.

[@xianweilei2646]

Thanks man ur amazing

[@AlexPresa]

Is that the Opal camera?

[@timothyricks]

No, it’s my Canon camera 😄

[@AlexPresa]

@@timothyricksGreat setup!! So cool to see how its changed over the years 🙌

[@timothyricks]

Thank you!! I’ve got lots more changes planned for later this year. It’s been fun learning something from scratch again when it comes to camera, audio, lighting.

[@merkmotief]

What would the wrapping of a section mean for the semantic build of a page?

[@timothyricks]

It wouldn’t mean anything. Divs do not have semantic meaning so screen readers and search engines just look for the tags inside them.

[@merkmotief]

@@timothyricks Thanks Tim! Great tutorial, again 😁

[@luisabalan63]

Hi Timothy! I'm following along the tutorial with the cloneable and for some reason the top of the red border doesn't appear in the scroll_trigger container, and on the top trigger container the bottom of the border doesn't appear. Any reason why this would be?

[@timothyricks]

Hmm, that’s probably correct! The scroll_trigger is supposed to extend past the top of the section and the top_trigger is supposed to extend past the bottom of the hero like shown in the tutorial. This fixes limitations with Webflow interactions.

[@luisabalan63]

Hmmm... ok. I guess just looking at your demo when you preview the trigger, all 4 sides of the red border seem visible, while I only have 3 visible on mine. I was thinking maybe there's a setting that I didn't input correctly. @@timothyricks

[@timothyricks]

@@luisabalan63 It depends on the height of the section. For sections 100vh or taller, all borders should show. For sections shorter than 100vh, one border should be missing.

[@luisabalan63]

Ahh that really clears up a lot! Thank you! OI really appreciate your patience and responsiveness to comments, it shows your dedication! One last question, in recreating the hero section, I could not get the button to align in the centre of the container. Is there any suggestions you have as to what might be the cause of this? @@timothyricks

[@petigubi]

Unfortunately, it's lagging on mobile. Why is that?

[@timothyricks]

Hi, I found that removing all of the smoothing so it responds in real time helps along with reducing the move amount from -50% to -30%. Also, adding this css can help prepare the browser for the interaction. .scroll_target { will-change: transform; } For larger sections though, I could only get it perfectly smooth by using GSAP. Heavy Webflow interactions often struggle with performance on mobile.

[@brandonkay-qe9yl]

mines a little jittery, could anyone help me understand why?

[@brandonkay-qe9yl]

in your last video on this using position sticky, it seems smoother and exactly how I want it.. but I couldn't make it work that way :(