Web анимация [Emil Kowalski]

Складчина: Web анимация [Emil Kowalski]

Animation on the Web
Язык: английский



Как создавать анимацию, которая выглядит правильно?

Изучите теорию и практику создания великолепной анимации с помощью этого интерактивного обучающего курса.

Что, если бы вы знали, как именно создавать отличные анимации?

• Если бы вы знали, из чего состоит хорошая анимация, вы бы понимали, какой тип замедления использовать, какой должна быть продолжительность, какие свойства нужно анимировать, чтобы сохранить производительность, и так далее.
• Вы могли бы перестать гадать: «Сработает ли это смягчение?» или «Не слишком ли длинный этот переход?», потому что вы бы знали, что выбрали правильные ингредиенты.
• И самое главное: вы сможете создавать анимацию, которая понравится вашим пользователям.

Интерактивное обучение, в ходе которого вы изучите

• Теорию и практику создания великолепных анимаций
• «Анимация в Интернете» — это курс, на котором вы узнаете, как правильно выбирать анимацию и тайминг, как улучшить свой вкус, что такое пружинная анимация и многое другое.
• Вы наконец-то начнёте быть уверенным в своём выборе, а не гадать, что может сработать.
• И всё это на специально созданной платформе для этого курса.
• После изучения теории мы перейдём к практике. Мы создадим много чего, и будет много упражнений, потому что именно так вы научитесь большему. После этих уроков вы будете точно знать, как создавать отличные и эффективные анимации с помощью CSS-анимации и Framer Motion.

Что ты получишь:

• Начиная с 4 базовых модулей и заканчивая пошаговыми инструкциями, вы узнаете всё, что нужно для создания потрясающих анимаций в интернете.
• После регистрации на этом курсе вы также получите доступ к некоторым бонусным функциям, которые помогут вам в работе над анимацией.

Программа:

Модуль 1. Заставляя это чувствовать себя правильно

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

Модуль 2. CSS-анимация

• Мы позаботимся о том, чтобы вы освоили основы CSS-анимации и знали, когда и как их использовать. Так вы сможете легко перейти на Framer Motion.
• Вы узнаете о преобразованиях, переходах, анимации по ключевым кадрам и многом другом. Не только об основах, но и о реальных примерах и упражнениях, которые действительно вам помогут.

Модуль 3. Как использовать Framer Motion

• Документация Framer Motion часто проходит удачный путь. Она охватывает простые анимации, которые отлично подходят для начинающих, но не дают вам большого представления о том, как создавать более сложные анимации или что делать, когда что-то ломается.
• Поэтому в этой части мы создадим много чего. Мы рассмотрим основы, а затем быстро перейдём к более сложным анимациям, таким как всплывающее окно с отзывами ниже. Мы столкнёмся с проблемами и решим их, чтобы вы знали, что делать, когда сами столкнётесь с подобными проблемами.

Модуль 4. Хорошая анимация против Отличной

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

Пошаговые руководства

• Это вторая часть курса, в которой вы увидите, как я создаю анимацию с нуля, а также узнаете, почему я принимаю те или иные решения.
• Разница между компонентами, которые мы создаём здесь, и теми, что были в предыдущих модулях, заключается в том, что здесь я показываю вам свой точный мыслительный процесс. Мы начнём с того, что подумаем и обсудим анимацию, которую хотим создать, затем перейдём к коду, улучшим его и продолжим работу.

Спойлер: Оригинал описания:

How do you craft animations that feel right?

Learn the theory and practice behind great animations with this interactive learning experience.
My profile picture, but without a face
Taught by Emil Kowalski

Coding animations is hard, and unfortunately, many tutorials follow a happy path. They cover simple animations that are great for beginners, but aren’t that helpful once you go past the basics.
But it’s not just the code that makes an animation work. A bad easing or duration can ruin an otherwise great animation. But how do you know whether you made the right choices? You don’t because animations are tricky. It just doesn’t feel right and you can’t tell why.

Hey, I’m Emil
I’m currently working as a design engineer at Linear. In the past, I’ve worked on the design team at Vercel where I developed the design system, dashboard, docs, and more.
I also created Sonner and Vaul, two open source React libraries that rely on animations. These packages are downloaded over 15,000,000 times per week from npm.

What you’ll get

• Starting with the 4 base modules all the way through walkthroughs, you’ll
• learn everything you need to know to build great animations on the web.

Module 1

• Making it feel right
• We’ll dive deep into the theory behind great animations. We’ll talk about taste, spring animations, timing, purpose, and more. After this module, you’ll stop guessing.You’ll know exactly why an animation feels off, and how to make it better.

Module 2

• CSS animations
• We’ll make sure that you get the basics of CSS animations right and know when and how to use them. This way you’ll be able to transition into Framer Motion with ease.
• You’ll learn about transforms, transitions, keyframe animations, and more. Not just the basic, but real-world examples and exercises that will actually help you.
• While this module involves a lot of coding, we will still talk about the theory. In the solution of exercises, I often talk about which easing and duration I chose and why. This is often times more important than the code itself.

Module 3

• How do I use Framer Motion
• Framer Motion’s documentation often times follows a happy path. It covers simple animations, which are great for beginners, but don’t give you a lot of insight on how to craft more complex ones or what to do when something breaks.
• That’s why, in this part, we’ll build a lot. We’ll cover the basics, then quickly move to more complex animations like the Feedback popover below. We’ll run into issues and solve them, so that you’ll know what to do when you run into similar problems yourself.

Module 4

• Good vs Great animations
• At this point in the course we know what differentiates a good animation from a bad one, and we know how to code them. In this module we’ll explore both the theory and practice on a deeper level.
• We’ll talk about how you can transfer feelings with animations, the importance of orchestration, accessibility, and more. After this module you’ll know how to take your animations from good to great.

Walkthroughs

• This is the second part of the course in which you’ll get to see how I create animations from scratch, including the reasons behind my decisions
• The difference between components we build here and the ones in previous modules is that here, I show you my exact thought process. We’ll start by just thinking and talking about the animation we want to make, then move to the code, improve it and iterate.

Регистрация закрыта.
Последний набор в этом году открывается 7 октября на ограниченное время.

Стоимость установит организатор
Скрытая ссылка