Discover the best scroll-reveal websites created by professional designers. Get inspired and start planning your perfect scroll-reveal web design today!

Design by https://www.callbruno.com/en/

This cloneable is for learning purposes only. I do not own the rights to this design and content.

Bruno

Scroll Transition Into Portfolio

This cloneable uses a paid GSAP plugin called SplitText that can be purchased at https://greensock.com/club/

Text Animations

Text Reveal Animations on Scroll

This cloneable is a features section that gently focuses on each feature as you scroll. 

I love the clean Apple-Esque aesthetic, rebuilt from https://amie.so (my recent muse for inspiration).

I've fully relied on Webflow interactions.

Sticky Features

Reveal Features on Scroll

Portfolio with a fixed slogan that changes content when scrolling through the individual projects. 

This project is inspired by Nelson Abalos Jr's «How to Webflow»: https://youtu.be/Y0W_xYrbzmA. 

The embeded code is compatible with all popular browsers including specific adaptations to Internet Explorer and Edge.

CSS Clip - Text reveal masking on-scroll

Text reveal masking on scroll

How I built the animated reveal effect for the panels on the http://theexpedition.co homepage using native IX2 interactions.

Panel Reveal

Animated Scrolling Panel Reveal

This project will show you how to simply hide your navbar when scrolling down on a page and revealing it again while scrolling upward. You can see the scroll upward interaction uses a slight offset so it's not triggered without intention or by accident. 

You are welcome to clone this project and use it. It's a simple interaction but in my opinion a very useful one and feels a bit more high end. Great for having navigation on your website when you need it yet without it getting in the way.

Hide/Reveal Nav On Scroll

Don't tell me this doesn't look cooool.

I saw a similar animation on some Awwwards site (can't remember the name) and though it looked amazing.

Smooth scroll by Locomotive.js, fixed section pinning type thingy by Gsap Scrolltrigger. 3D renders by Unsplash.

Smooth Scroll Grid Reveal Animation

Easily create an interaction to reveal different images while you scroll through sections

Image Scroll Reveal

Veza Digital

Really clean text effect where each line is revealed on scroll. When using this in your own project, make sure you keep an eye out for the font sizes on mobile, as you may have to edit the animation to make it work for your text. Happy cloning!

Text Expose On Scroll

Cloneable Reveal Text On Scroll

I searched in the Webflow Showcase section and in the forums to only find that people used to have some problems with it. One demo I found was cool but wasn't working flawlessly (upon scrolling back up occasional flickering occurred). So I searched further and found a clean and easy solution from Chris Coyier from March 2020 and recreated his demo here in Webflow.