Как сделать такой дизайн?

Question

[ggrachdev]

Всем привет! Как сделать такой дизайн? Имею ввиду переключение прижатых элементов слева и справа на область просмотра. Когда нажимаем на элементы справа, слева - то они плавно перетекают на экране
https://at-home.club/#berlin - это какая-то библиотека?
Как это можно реализовать?

Answer 1

[Александр]

scrollmagic.io

Comments

[ggrachdev]

GSAP + ScrollMagic?

[Александр]

ggrachdev, можно и gsap использовать, хотя такие эффекты можно реализовать на чистом css.

[ggrachdev]

Александр, благодарю за ответ! Думаю, что оно

[Александр]

ggrachdev, успехов

Answer 2

[Владимир]

Vanilla JS называется
Вот пример где анимируют свойство flex-base на hover
Тебе нужно переделать на click вместо хувера, просто добавить немного яваксрипта
https://codepen.io/thomas-eilermann/pen/grjEjE
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

[ggrachdev]

Если в 2 словах имеете ввиду анимировать смену order?

[Владимир]

ggrachdev, Зачем менять ордер ? Тут анимируется смена flex-base
Приблизительно так, но анимировать скролл нужно отдельно
https://codepen.io/casufi/pen/ZEQdPbg

[Владимир]

Вчера потерял линк на codepen по дороге

[ggrachdev]

Владимир, благодарю Владимир! Оно!