Hi Bogdan,
Yes, those other forum posts I sent were just to show how Codepen solutions can be implemented if you found one which had a similar effect.
Natively, have a quick look at this example I made just with Interactions 2.0:
http://staged-text.webflow.io/
The share link is here, so you can take a look at the construction too:
https://preview.webflow.com/preview/staged-text?preview=55d9c69229a28f22affcf5d49a4f8a24
Only a rough concept, but what I have done is:
First section:
- positioned the 1st ‘text block’ absolute, and also a ‘text block 2’ in the same position (they appear to overlay each other in the ‘Designer’ view).
- In the first text block, each word has a ‘span’ with a class name of first, second, or third fade.
- The text block 2 is just text for now, but would also have spans if you were building this out.
Second section:
- I’ve set two ‘scroll into view’ interactions and used different offsets to trigger. So when the second section scrolls into view it affects opacity on those text blocks in the first section. When it scrolls out the opacity is reversed.
- One of these interaction deals with the first text block, fading opacity to zero at staggered intervals (and then back to 100% on scroll up)
- The other deals with showing text block 2 after a certain amount of the second section has come into view. (and then back to 0% on scroll up)
There may be other ways to achieve the same - the community is full of ideas and brains
Hope that is helpful…