Сделать js анимацию на существующей странице
Нужно сделать js анимацию на странице.
Что есть:
Видео: https://www.berrycast.com/conversations/35fefc09-011b-5ad2-941a-9ad6cf0ebe19
Нужно исправить или сделать js анимацию заново.
Как нужно:
Видео: https://www.berrycast.com/conversations/942611fa-c4a3-59f0-a11d-e979c047c73a
Страница: https://www.lunit.io/en/products/insight-mmg
Описание нужной анимации:
Страница загружается, посередине экрана находится текст.
Скролл вниз, появляются картинки МРТ.
При скролле вниз все картинки МРТ сменяют друг друга,
При скролле вверх картинки идут в обратном порядке, от последней к первой.
Скролл вниз, дошли до последней картинки МРТ, последняя картинка fade out в черный фон.
Скролл вниз, "волной" появляется первый ряд с 5 блоками с информацией.
Скролл вниз, первый ряд с 5 блоками в одну линию уходит вверх.
Скролл вниз, "волной" появляется второй ряд с 5 блоками с информацией.
Скролл вниз, второй ряд с 5 блоками в одну линию уходит вверх.
Закончилась анимация.
При скролле вверх анимация идет в обратном порядке.
Дальше на странице идут уже готовые блоки с информацией.
Разница между примером на lunit.io и тем, что требуется, заключается в том, что на lunit.io блоки с цифрами появляются "волной" на фоне последней картинки МРТ.
Нам нужно, чтобы блоки с информацией появлялись "волной" на черном фоне после того, как последняя картинка МРТ fade out.