Как вот так анимировать иконки, что используется для этого?

Question

[rock4ster]

С помощью чего делаются вот такие анимации иконок? Может кто поделится ссылками на похожую анимацию и объяснения

Answer 1

[Денис Инешин]

PhotoShop, After Effects -> to gif.

Можно конечно попробовать сымитировать на CSS, но это будет весьма трудоемко. Можете начать отсюда:
https://daneden.github.io/animate.css/
https://developer.mozilla.org/en-US/docs/Web/CSS/C...
https://developer.mozilla.org/en-US/docs/Web/CSS/@...
продолжить сюда:
greensock.com/tweenmax

Демки: css-live.ru/cssjssvg-s-podvypodvertom/ezhenedelnay...

Answer 2

[Nikolay Talanov]

Вариант с гиф это совсем уж извращение.
1 вариант по идее можно сделать с помощью svg gooey фильтра (комбинация блюра с контрастом, которая дает эффект перетекания).
Но чаще всего такое делают либо с помощью спрайтов (устаревший, но простой вариант), либо с помощью bodymovin (js плагин для After Effect, вы экспортите анимацию из AE и юзаете в нем).
Ну и конечно есть вариант такое руками с помощью SVG запилить, но это крайне нерациональный подход на фоне того что я описал выше.

Answer 3

[Антон Мудренок]

Тут немного объясняют и есть даже толковые исходники:
tympanus.net/codrops/2016/05/11/distorted-button-e...

Answer 4

[rock4ster]

Спасибо, посмотрим.