Material design effect — Joining & Dividing. Как реализовать?

Question

[Eugene Alitz]

Всем, привет.

Как можно реализовать такой эффект Joining & Dividing на css\jquery\js?

Или есть ли какие нибудь готовые библиотеки на основе Material Design с данным эффектом на борту?

Спасибо

Answer 1

[Виталий]

С анимацией пошаманить, а так : сверстать конечное состояние и потом паддингами или позицинирование раздвинуть как надо.
Ну и при экшене анимировать возврат в начальное состояние.
Если в каждом блоке будет контент, то переносить в первый блок, который в итоге будет общим.

Answer 2

[Максим Тимофеев]

Добавьте к css\jquery\js еще svg и все срастется.
Как примеры анимации с помощью svg:
codepen.io/suez/pen/ZGWbmE