Как сделать такую анимацию?

Question

[ArtJH]

Вот сайт. Анимация появление продуктов. Когда скролишь вниз, товар появляется снизу вверх, а когда скролишь вверх, то товар сверху вниз.

Мои варианты:

1) У активного товара есть класс "active". Попробовать отслеживать его соседние элементы(prev и next). Потом задавать css свойства transform. prev transform: translateY(200%), next transform: translateY(-200%) , active transform: translateY(0%)
Вот только не знаю как сделать это отслеживание смены класса active.

Comments

[Erl]

там ведь обычный скролл секциями, а продукт просто выравнен по центру

[ArtJH]

Erl, это понятно, что он по центру. А как сделали анимацию движения то вверх, то вниз?

[Erl]

ArtJH, это скролл блоками, так как передвигается сразу весь блок, возникает такой эффект

[ArtJH]

Erl, хм..это мысль. А задние два блока position absolute?

[Erl]

ArtJH, угу

Answer 1

[RAX7]

Comments

[ArtJH]

RAX7, чел ты просто сделал мой день, второй день парюсь с плавными анимациями и прочее. Спасибо тебе большое!

[RAX7]

ArtJH, да не за что, только учти, что scroll-behavior не работает в safari

[ArtJH]

RAX7, а можно такое сделать без lodush.js?
Я уже использую jquery их можно вместе использовать?
Будет ли считаться неправильным использовать обе библиотеки(Например vue и jquery)?

[RAX7]

ArtJH, можешь только debounce использовать вместо lodash https://www.npmjs.com/package/lodash.debounce