Существует ряд библиотек, позволяющих анимировать SVG: Snap.svg, Paper.js, Velocity.js и другие. Но им не хватает наглядности. Это делает работу над сложной анимацией прерогативой опытных креативных разработчиков и дистанцирует их от дизайнеров.

Поэтому наша команда взяла на вооружение еще один инструмент для работы над векторной анимацией: Adobe After Effects. В сочетании с плагином Bodymovin он позволяет создавать анимацию в формате json и воспроизводить при помощи библиотек Lottie не только в браузере, но и в мобильных приложениях на разных платформах.

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

Я расскажу о нашем опыте использования plugin’а, с какими сложностями мы столкнулись во время сложного анимационного проекта и как преодолевали их.