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?
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.
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.