Text dis/appear upon scroll based on range

Hi,

I’m looking to animate text to dis/appear on scroll, but the scroll range is not 100%vh. In other words, I want fixed text to act as info to the images scrolling beside it. These images are not uniformly the same size, so the text needs to change when the top of a new image appears.

Here is a link to a site that does 99% of what I’d like to do:

(with the 1% being I want the text to be fixed near the top of page rather than at the bottom)

Can anyone help with the layout elements, and animation/triggers? Is there an existing tutorial vid?

Thanks!


Hey Andy, welcome :slight_smile:

One way to create this effect with Webflow is to have the text elements positioned sticky, and a ‘while scrolling in view’ interaction on all of the wrapping sections to unhide and hide the texts.

Took me 12 minutes :smiley:
https://swapping-texts.webflow.io/

On the shorter sections (the ones with hight less than 100vh) the interaction is not perfect, so you’ll need to tweak it specifically for each of those.

Cool! I’ll try it out and let you know.

1 Like

How do you get the image to a be a trigger for the text animation? Could you possibly provide the designer link to the example you made?

This is how I set mine up so far:
https://webflow.com/design/adld-portfolio

Something is interfering with the animations, I’m not sure what’s going on: https://preview.webflow.com/preview/adld-portfolio?utm_source=adld-portfolio&preview=b4168ab4cefc43b4ba1a448af812158f

Sure!
https://webflow.com/website/swapping-texts