How do I make text fade in one by one on scroll in a single container?

Design help Animations & Interactions
1

I’m looking to make a “simple” page that has four small paragraphs progressively fade into view on scroll. I’ve soon discovered that this may not be as easy as I figure.

I’ve created a 100vh page with a simple black background, a container with the 4 paragraphs of text, and have tried to make a reveal element on scroll animation but they start the second the page is loaded and since the page is only 100vh, they all appear right away.

Any advice would be greatly apprecited, I’m pretty green with Webflow!

2

Hi @Osedaxx

Please add a read only link to your project so we could have a look and make a suggestion as to how achieve your design goals…

Cheers!

3

Derp, my bad.,

https://preview.webflow.com/preview/the-fall-of-chop?utm_medium=preview_link&utm_source=designer&utm_content=the-fall-of-chop&preview=97aac6b694d6393d8d1f5497d732f61c&mode=preview

I’ve only managed to have the sample text appear on page load. Ideally I’d like the text to appear by scroll rather than page load and section to be sticky until all of the text has been scrolled though, if that makes any sense?

Thanks in advance and I apologize for probably a dumb question.

4

Sorry, but how are you intending to scroll a 100vh page? its not going to scroll…

if you want to reveal text you can do it on click or just timed…

5

ok i think i got it… so the parent is 100vh x 100vw with hidden overflow, and the child divs scroll inside it… i think its doable like that

So you make Section 1 then you add 4 containers, each container has 1 heading… size as you like, and then animate on scroll… this should do it…

1 Like
6

Thanks for your help! I got it working :slight_smile: