Emil Kowalski
Я работаю в качестве дизайнера-инженера в Vercel. Мне нравится создавать инструменты для дизайнеров и разработчиков, а также глубоко анализировать пользовательский интерфейс, его внешний вид, ощущения и поведение.
Продолжительность
2 ч 23 мин
Категория
Другое (Frontend)
Количество уроков
42 Видео
Дата добавления
27 мар. 2024 г., 23:45
Язык
Английский
Дата обновления
30 апр. 2025 г., 00:43
Узнайте, как создавать анимации, которые вызывают эмоции у людей. Этот курс предназначен для тех, кто ценит мой стиль анимаций и/или кто стремится улучшить свои навыки. В курсе содержится все, что я знаю о движении в интернете. Вы узнаете, как создавать компоненты, и многое другие.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
-
Урок 1. 00:03:11Intro
-
Урок 2. 00:03:53What makes an animation feel right?
-
Урок 3. 00:04:41The Easing Blueprint
-
Урок 4. 00:05:57Spring animations
-
Урок 5. 00:05:29Timing and purpose
-
Урок 6. 00:03:25The magical ingredient.
-
Урок 7. 00:02:44The beauty of CSS animations
-
Урок 8. 00:01:19Transforms Solution
-
Урок 9. 00:01:08Transitions Solution 1
-
Урок 10. 00:02:34Transitions Solution 2
-
Урок 11. 00:02:08Transitions Solution 3
-
Урок 12. 00:03:13Transitions Solution 4
-
Урок 13. 00:02:02Keyframe animations Solution 1
-
Урок 14. 00:02:32Keyframe animations Solution 2
-
Урок 15. 00:06:06Why Framer motion
-
Урок 16. 00:00:25How do i code animations
-
Урок 17. 00:02:27How do i code animations - more 1
-
Урок 18. 00:04:33How do i code animations - more 2
-
Урок 19. 00:03:22How do i code animations - more 3
-
Урок 20. 00:02:46How do i code animations - more 4
-
Урок 21. 00:01:36Feedback popover
-
Урок 22. 00:02:25Feedback popover - more 1
-
Урок 23. 00:02:05Feedback popover - more 2
-
Урок 24. 00:01:13Multi-step component
-
Урок 25. 00:02:05Multi-step component - more 1
-
Урок 26. 00:01:13Multi-step component - more 2
-
Урок 27. 00:03:22Multi-step component - more 3
-
Урок 28. 00:09:45Trash interaction
-
Урок 29. 00:01:13Animating in Public
-
Урок 30. 00:03:37The big little details
-
Урок 31. 00:03:15Animations of the future
-
Урок 32. 00:02:53[Family Drawer] The Analysis
-
Урок 33. 00:01:30[Family Drawer] First animations
-
Урок 34. 00:01:31[Family Drawer] First animations - more 1
-
Урок 35. 00:01:40[Family Drawer] First animations - more 2
-
Урок 36. 00:02:02[Family Drawer] Crossfade
-
Урок 37. 00:01:46[Family Drawer] Crossfade - more 1
-
Урок 38. 00:02:46[Family Drawer] The finishing touch - Solution
-
Урок 39. 00:02:54[Dynamic Island] The Design
-
Урок 40. 00:05:22[Dynamic Island] Ring view
-
Урок 41. 00:02:45[Dynamic Island] Timer view
-
Урок 42. 00:04:28Dynamic Island] Morph effect
The course is in production. New chapters will appear as they are released.
Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай
Animations on the web,
а также все другие курсы, прямо сейчас!
Автор - Emil Kowalski
Категории
Комментарии
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Другие материалы в этой категории
CSS-анимации
CSS Animations
Анимация пользовательского интерфейса играет важную роль для веб-приложений и веб-сайтов в улучшении взаимодействия с пользователем. Но создание анимации может быть трудным или чрезмерным. На этом курсе мы изучим основы CSS-анимации и перейдем к продвинутым концепциям, таким как оркестровка и хореография. Мы также изучим принципы моушн-дизайна, которые сделают все наши анимации последовательными и продуманными.
CSS Анимации: Полное руководство
CSS Animations: The Complete Guide
Анимации, которые вы будете создавать, будут реальными примерами, которые вы сможете использовать для улучшения любого веб-сайта. Этот обширный курс по CSS-анимации могут пройти все разработчики любого уровня подготовки, в том числе и новички. Рекомендуется иметь базовые знания HTML и CSS, но нет необходимости знать что-либо о веб-анимации, так как все это будет тщательно изучено. Я не включил какую-либо сложную терминологию, так что, если у вас
Jeroen Reumkens
21 февр. 2024 г., 12:30
Анимация веба с помощью Framer Motion
Animating the web with Framer Motion
Создание плавных, производительных и красивых анимаций сложно. Framer Motion помогает преодолеть многие из этих трудностей. В этом курсе я проведу вас через все, что может предложить Framer Motion. Вместе мы рассмотрим все API Framer и создадим впечатляющие проекты из реального мира.
Build UI
21 сент. 2023 г., 21:39
Рецепты Framer Motion
Framer Motion Recipes
Framer Motion - это популярная библиотека анимации для React. Она предлагает и декларативные, и императивные API, поэтому вы можете добавлять общие анимации всего лишь несколькими строками кода или перейти на более глубокий уровень и создавать настраиваемые эффекты. Она поддерживается компанией Framer, имеет активное сообщество и следует последним beweet практикам, используемым в экосистеме React.В этом курсе вы изучите Framer Motion с нуля, созд
leveluptutorials
4 мар. 2020 г., 11:28
Анимации в React c Framer Motion
Animating React with Framer Motion
Добро пожаловать в Animating React с Framer Motion! В этой серии мы научимся создавать забавные анимации с помощью Framer Motion. Давайте начнем!
October 07, 2025
Fully refreshed theory module
I’ve learned a lot during the last two years about how to teach, but also I learned new stuff about animations. This felt like a good moment to refresh and improve the theory module based on my learnings.
All 7 lessons have been updated with new interactive examples, copy, videos, and more. The teaching style now leans much more into bad vs good examples to really show you the difference a proper animation makes.
There’s also a new lesson called “Practical Animation Tips”. It contains more than 15 tips that you can apply today and serves as a guide you can come back to whenever you need to make a decision or feel stuck on an animation.
One tip talks about using blur when your animation feels off.
One of my favorite tips there is about recording your animations. When something about your animation feels off, but you can’t figure out what, record it and play it back frame by frame. This will not only help you see the animation in a new light, but also help you notice details that you might have missed at normal speed.
Improvements
July 08, 2025
New Walkthrough series
You’ll learn how to build a navigation menu component in a new, 3 part walkthrough series. As always, we’ll not only focus on the implementation, but also on the easing, duration, and so on.
There’s also a new theory lesson called “Animations and AI”. In it, we’ll talk about how AI can help you with animations and how I use AI in my work. You’ll also get a Cursor Rules file that contains all the principles from the theory lessons so that an LLM knows how to help you properly.
A solution to the coin flip reverse engineering exercise has been added based on requests from students.
https://animations.dev/changelog
First of all, we copied the code from the code playground blocks and moved it into a separate folder called 'code'. You can find them in the corresponding sections.
Three new sections have also been added to Module 03: How do I use Framer Motion
The Basics
Hooks and animations NEW
Interactive graph NEW
For example: under code > 3. How I use Framer Motion > 3 Feedback popover folder, there is an html file called "Animations on the web - SPINNER JS visible" which shows only half of the JS code of that spinner file from the code editor.
Is it possible to include the full code to recreate the animation on my local machine?
OR is there a code repo that you can upload, please?
As always, thank you for the course!!
Будь ласка, онови
https://x.com/emilkowalski_/status/1830955269599158298
Please add the new chapters if it's possible.
Thanks!