Как сделать изменение текста при скроллинге страницы?

Question

[Filipp Matveev]

Подскажите как сделать анимацию изменения текста/блоков/фото во время прокрутке страницы, при переходе между блоками.
Задача зафиксировать все элементы по центру, но отображать их только внутри нужного блока. При скроллинге страницы проходя через "линию" текст будет меняться с одного на другой.

пример

Пробовал фиксировать текс через:
position: fixed;

А блоку давать свойства:
overflow: hidden;

Но вверху стоящий текст и выходящий из блоков накладывается друг на друга:

пример

вверху все видно и накладывается друг на друга

в последнем всё хорошо

в body опять весь текст накладывается друг на друга

Comments

[Froggyweb]

что бы это выглядело нормально, то только JS

[Filipp Matveev]

Froggyweb, я не против, не нашел плагинов которые бы справлялись с данной задачей.

[Froggyweb]

Filipp Matveev, ну GSAP к примеру
вот пример https://www.youtube.com/watch?v=Dn4dIv4oa1s :)

[Filipp Matveev]

Froggyweb, да это именно то что надо, спасибо)
Кинь в ответы я отмечу что вопрос закрыт

[Froggyweb]

Filipp Matveev, главное сделать логику. GSAP - не панацея. Это лишь инструмент, но есть адекватный скроллинг и упрощенная запись анимаций с оптимизацией

Answer 1

[Anton Polyakov]

Это тебе в JavaScript. При определенном значении clientHeight скрывать один текст и показывать другой