SVG анимации с помощью GreenSock

Привет, меня зовут Кристина Гортон с Design + Code. Сегодня я хочу научить вас, как анимировать SVG с помощью библиотеки анимации GreenSock (GSAP). Мы начнем с рассмотрения кода SVG и его разбивки, чтобы лучше понять, как манипулировать им для анимации. Затем я расскажу о том, как экспортировать и оптимизировать ваши SVG. Далее я покажу вам, как воплотить эти SVG в жизнь с помощью GSAP. Мы будем использовать множество красивых иллюстраций и прототип пользовательского интерфейса из моего курса по макету CSS и анимации в CodePen и добавим к нему анимацию. Если у вас нет учетной записи CodePen, мы кратко поговорим о том, как ее настроить, всего за минуту.

CodePen Коллекция для курса

Это ссылка на коллекцию CodePen.

Почему этот курс?

Человеческий мозг запрограммирован уделять внимание движущимся объектам. Анимация повсюду в сети. От тонких переходов кнопок к полному рассказу истории онлайн. В этом курсе я покажу вам, как создавать привлекательные анимации, которые не отвлекают от продукта, но улучшают общее впечатление пользователя. Посмотрев, как найти или создать свои собственные SVG, мы начнем с нескольких простых анимаций GreenSock, чтобы привыкнуть к синтаксису.

В этом курсе мы будем использовать несколько разных инструментов. Одним из инструментов, которые мы будем использовать, является Figma.