Сжатие и растяжение

Джош Комо с очередным классным гайдом с демками. На этот раз — про анимации трансформации.

Когда вы в жизни бросаете мячик об пол, если этот мячик у вас не свинцовый, то он заметно деформируется, а потом возвращает форму. В интерфейсах при этом мы часто используем анимацию отскока, смещения или увеличения (для модалок, шторок, тултипов), но никакого подобия физики сжатия и растяжения не применяем.

В демках в статье показывается, как такое можно сделать на SVG+CSS либо при помощи JS-библиотеки Motion. В обоих случаях получается вау-эффект.

https://www.joshwcomeau.com/animation/squash-and-stretch/