Главная страницаКатегория другое (frontend)Причудливые анимации

Причудливые анимации

Name: Причудливые анимации
Price: 13 USD
Rating: 4.6 (28 reviews)

Whimsical Animations

Josh Comeau

★4.6 (всего оценок - 28)

Продолжительность

12 ч 24 мин

Категория

Другое (Frontend)

Количество уроков

107 Видео

Дата добавления

29 сент. 2025 г., 22:33

Язык

Английский

Дата обновления

3 мая 2026 г., 03:20

Причудливые анимации — это практический курс, который поможет вам уверенно работать с сложными веб‑анимациями. Здесь вы шаг за шагом освоите техники из CSS, JavaScript, SVG и Canvas, научитесь создавать эффекты, которые выделяют современные продукты и делают интерфейсы по‑настоящему живыми.

О чём этот курс

Мир веб-анимаций давно вышел за рамки простых CSS-переходов. Сегодня эффектные, аккуратно проработанные анимации становятся частью пользовательского опыта — их активно используют ведущие компании, улучшая восприятие и качество взаимодействия пользователей с продуктом.

В курсе вы погрузитесь в практику: будете экспериментировать, собирать собственные анимации, разбирать примеры и осваивать подходы, которые редко встречаются в обычных обучающих программах.

Почему это важно именно сейчас

Несмотря на развитие ИИ-инструментов, анимации всё ещё требуют тонкого ручного подхода. Языковые модели помогают с базовыми задачами, но выразительные, нестандартные и технически сложные эффекты требуют глубокого понимания.

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

Что вы освоите

Вы получите системное понимание, как создавать выразительные, быстрые и тщательно продуманные анимации, которые усиливают UX, а не мешают ему.

Ключевые направления обучения

Часть I: Particle Effects

Процедурные эффекты частиц
Создание и оптимизация динамических визуализаций
Техники повышения производительности
Интеграция эффектов в React-приложения

Часть II: The Magic of SVG

Работа с формами, линиями и компоновкой в SVG
Анимации с пружинами
Продвинутые техники визуализации
Использование SVG в связке с React

Часть III: Advanced Interactions

Анимации, реагирующие на мышь и движение
Параллакс-эффекты
Анимации переходов между страницами и маршрутами
Создание интерактивных пользовательских эффектов

Часть IV: Working with HTML Canvas (скоро)

Когда выбирать Canvas вместо SVG
Работа с частицами, физикой, шумом
Создание высокопроизводительных визуальных эффектов

Бонусные материалы

Animation Design

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

Animation Challenges

Практические задания на воспроизведение эффектов
Сравнение ваших решений с авторскими

Для кого этот курс

Курс подойдёт разработчикам и дизайнерам, которые хотят:

создавать впечатляющие, «магические» анимации;
углубить знания в SVG и Canvas;
освоить современные подходы к интерактивности;
повысить уровень своих интерфейсов до уровня топовых продуктов.

Почему этот курс уникален

Каждый модуль основан на реальных приёмах и техниках, собранных и проверенных годами работы. Если вы когда-либо удивлялись, как реализованы те или иные эффекты — велика вероятность, что здесь вы не только узнаете ответ, но и сможете повторить эти эффекты самостоятельно.

Этот курс — ваш путь к осознанному, выразительному и профессиональному владению веб-анимацией.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:11:34
004 [MAIN] Particle Generation
Урок 2. 00:05:50
010 [MAIN] Particle Cleanup
Урок 3. 00:06:42
019 [MAIN] wham-01-01-01-starry-night-exercise
Урок 4. 00:05:31
023 [MAIN] 01-02-01-shimmer-button-solution
Урок 5. 00:07:41
034 [MAIN] wham-01-04-dispersion
Урок 6. 00:04:15
037 [MAIN] 01-04-01-alternative-approach
Урок 7. 00:07:00
050 [MAIN] wham-01-04-03-raining-emoji-exercise
Урок 8. 00:06:39
054 [MAIN] 01-05-02-custom-curves
Урок 9. 00:04:00
068 [MAIN] wham-01-0601-dynamic-keyframe-rotating-bar-exercise-solution
Урок 10. 00:04:26
072 [MAIN] wham-01-0601-bouncing-balls-exercise-solution
Урок 11. 00:09:41
074 [MAIN] wham-01-07-polar-coordinates
Урок 12. 00:06:30
081 [MAIN] wham-01-07-01-trigonometry-101
Урок 13. 00:09:16
086 [MAIN] wham-01-07-02-magic-wand-exercise-solution
Урок 14. 00:09:25
090 [MAIN] wham-01-07-02-rocketship-exercise-solution
Урок 15. 00:10:28
092 [MAIN] wham-01-07-03-evaluating-performance
Урок 16. 00:04:20
096 [MAIN] wham-01-08-particle-distribution
Урок 17. 00:06:02
101 [MAIN] wham-01-09-linear-interpolation
Урок 18. 00:05:42
110 [MAIN] wham-01-09-01-wham-final-exercise-solution
Урок 19. 00:03:27
118 [MAIN] wham-011001-shimmer-revisited-exercise-solution
Урок 20. 00:05:00
121 [MAIN] 01-10-01-magic-wand-revisited-solution
Урок 21. 00:09:59
124 [MAIN] wham-01-11-01-dynamic-tweaks
Урок 22. 00:08:19
131 [MAIN] wham-01-11-02-pop-circle
Урок 23. 00:04:53
134 [MAIN] wham-01-11-02-swelling-heart
Урок 24. 00:11:10
149 [MAIN] wham-01-13-01-particles-in-react
Урок 25. 00:02:44
171 [MAIN] wham-02-01-02-emoji-01-mouthless
Урок 26. 00:02:18
173 [MAIN] wham-02-01-02-emoji-02-neutral
Урок 27. 00:02:08
175 [MAIN] wham-02-01-02-emoji-03-smiling
Урок 28. 00:04:08
177 [MAIN] wham-02-01-02-spark-line-exercise-solution
Урок 29. 00:00:06
178 [MAIN] react-trend-v2
Урок 30. 00:04:20
202 [MAIN] wham-02-03-intro-to-paths
Урок 31. 00:06:39
219 [MAIN] wham-02-03-04-ex-path-circuit
Урок 32. 00:05:28
236 [MAIN] wham-02-04-01-motion
Урок 33. 00:02:46
244 [MAIN] wham-02-04-02-ex-blinking-emoji
Урок 34. 00:05:28
247 [MAIN] wham-02-04-02-ex-hamburger-to-x
Урок 35. 00:05:33
253 [MAIN] wham-02-04-02-ex-play-to-stop
Урок 36. 00:06:48
263 [MAIN] wham-02-07-self-drawing
Урок 37. 00:05:31
276 [MAIN] wham-02-07-01-ex-circular-progress-bar
Урок 38. 00:08:20
280 [MAIN] wham-02-07-01-ex-electrical-wiring
Урок 39. 00:04:29
293 [MAIN] wham-02-08-05-ex-toast-popup
Урок 40. 00:05:39
299 [MAIN] wham-02-10-masks
Урок 41. 00:07:38
310 [MAIN] wham-02-10-01-ex-filling-heart
Урок 42. 00:05:34
317 [MAIN] wham-02-10-01-ex-popping-circle-revisited
Урок 43. 00:01:57
322 [MAIN] wham-02-10-01-ex-improved-self-drawing
Урок 44. 00:04:02
325 [MAIN] wham-02-10-02-mask-gotcha-transforms
Урок 45. 00:04:30
356 [MAIN] wham-ad-00-intro
Урок 46. 00:09:12
373 [MAIN] wham-ad-0002-common-mistake
Урок 47. 00:06:25
410 [MAIN]wham-ad-asymmetrical-animations
Урок 48. 00:06:52
421 [MAIN] wham-ad-0203-action-driven-edge-case
Урок 49. 00:04:35
450 [MAIN] wham-ad-0401-sound-prep
Урок 50. 00:16:31
460 [MAIN] wham-ad-05-figma-swoops
Урок 51. 00:15:11
468 [MAIN] wham-03-01-cursor-interactions-intro
Урок 52. 00:10:58
480 [MAIN] wham-03-0101-cursor-interactions-exercise-1-solution
Урок 53. 00:12:22
485 [MAIN] wham-03-0101-cursor-interactions-exercise-2-ripple-btn-solution
Урок 54. 00:08:31
495 [MAIN] wham-03-02-googly-eyes
Урок 55. 00:09:19
498 [MAIN] wham-03-01-05-springy-motion
Урок 56. 00:13:37
509 [MAIN] wham-03-0203-googly-eyes-in-react
Урок 57. 00:05:14
512 [MAIN] wham-03-03-svg-coordinate-mapping
Урок 58. 00:09:25
517 [MAIN] wham-03-03-01-growing-circles-exercise-solution
Урок 59. 00:06:25
521 [MAIN] wham-03-0301-click-to-draw-exercise-solution
Урок 60. 00:05:14
538 [MAIN] wham-03-0501-wipe-ex-wipe-text
Урок 61. 00:03:23
542 [MAIN] wham-03-0501-wipe-ex-wipe-graph
Урок 62. 00:12:21
547 [MAIN] wham-03-0601-animation-timeline
Урок 63. 00:07:16
554 [MAIN] wham-03-0602-animation-timeline-ex-shapes
Урок 64. 00:03:06
557 [MAIN] wham-03-0602-animation-timeline-ex-self-draw
Урок 65. 00:07:07
560 [MAIN] wham-03-0602-animation-timeline-ex-staggered-words
Урок 66. 00:05:30
562 [MAIN] wham-03-0603-linked-animation-timelines
Урок 67. 00:06:00
568 [MAIN] wham-03-0604-intersectionobserver-root-margin
Урок 68. 00:07:06
578 [MAIN] wham-03-06-05-smooth-scrolling
Урок 69. 00:05:30
583 [MAIN] wham-03-06-sticky-header-trick
Урок 70. 00:06:48
590 [MAIN] wham-03-07-view-transitions-intro
Урок 71. 00:11:29
593 [MAIN] wham-03-0701-view-transitions-syntax
Урок 72. 00:06:01
600 [MAIN] wham-03-0702-matrix-transforms
Урок 73. 00:08:14
609 [MAIN] wham-03-07-vt-exercise-1-notifications
Урок 74. 00:02:47
610 [MAIN] wham-03-0703-ex2-intro-explanation
Урок 75. 00:09:33
612 [MAIN] wham-03-0703-ex-action-driven-revisited
Урок 76. 00:08:53
620 [MAIN] wham-03-0705-interrupts
Урок 77. 00:05:55
624 [MAIN] wham-03-0706-vt-different-elements
Урок 78. 00:05:31
636 [MAIN] wham-03-0708-vt-route-changes
Урок 79. 00:09:17
666 [MAIN] wham-04-01-canvas-basics
Урок 80. 00:05:17
672 [MAIN] wham-04-01.01-raster-vs-vector
Урок 81. 00:07:51
678 [MAIN] wham-04-01.02-pixel-ratio
Урок 82. 00:04:49
700 [MAIN] wham-04-01.05-circle-grid-exercise-solution
Урок 83. 00:08:19
702 [MAIN] wham-04-02-canvas-animation
Урок 84. 00:05:00
709 [MAIN] wham-04-02.02-ex-dvd-logo
Урок 85. 00:06:19
712 [MAIN] wham-04-02.02-ex-gravity-ball
Урок 86. 00:06:22
716 [MAIN] wham-04-02.05-circle-grid-spotlight-ex
Урок 87. 00:06:35
732 [MAIN] wham-04-02.03-delta-time
Урок 88. 00:15:30
741 [MAIN] wham-04-03-rocketship
Урок 89. 00:09:52
752 [MAIN] wham-04-03.01-squiggle-drop-ex
Урок 90. 00:11:17
756 [MAIN] wham-04-06-transforms
Урок 91. 00:10:39
783 [MAIN] wham-04-06.03-simplex-noise
Урок 92. 00:09:10
805 [MAIN] wham-04-07-magnetic-shavings-v3
Урок 93. 00:11:53
825 [MAIN] wham-04-08-fireworks-solution
Урок 94. 00:06:57
846 [MAIN] 05-framer-motion-basics
Урок 95. 00:02:49
853 [MAIN] 05-framer-motion-exercise-toggle
Урок 96. 00:06:35
859 [MAIN] 05-framer-motion-exercise-toasty
Урок 97. 00:11:06
861 [MAIN] 05-layout-animations
Урок 98. 00:02:06
873 [MAIN] 05-layout-toggle-exercise-solution
Урок 99. 00:02:57
876 [MAIN] 05-layout-flex-demo-exercise-solution
Урок 100. 00:09:22
880 [MAIN] 05-layout-id
Урок 101. 00:13:43
887 [MAIN] 05-working-with-groups
Урок 102. 00:03:56
896 [MAIN] 07-layout-groups-fungible-vs-non-fungible
Урок 103. 00:01:31
900 [MAIN] 07-ex1-non-fungible-finish-explanation
Урок 104. 00:06:45
904 [MAIN] 07-ex1-non-fungible-finish-solution
Урок 105. 00:05:23
912 [MAIN] 07-ex2-coin-counter-solution
Урок 106. 00:07:05
918 [MAIN] 07-ex3-reading-list-solution
Урок 107. 00:09:26
923 [MAIN] 07-reading-list-solution-stretch

Автор - Josh Comeau

Josh Comeau

Привет, я Джош! Вы не поверите, но самым первым нетривиальным веб-приложением, которое я создал, была платформа для онлайн-обучения! Мой друг работал репетитором, и ему нужен был способ задавать своим ученикам математические задачи. Я создал его с помощью PHP, MySQL и jQuery. Я отказался от этого проекта, когда обнаружил Khan Academy, всемирно известную некоммерческую организацию, чья миссия - предоставить бесплатное онлайн-образование мирового у

+35

Комментарии

CourseHunter Team
3 мая 2026 г., 00:20
Update:
NEW Part 4 HTML Canvas
NEW Bonus Layout Animations with Motion
Anonymous
29 апр. 2026 г., 14:01
Update please
dockercontainer58
29 апр. 2026 г., 06:19
Please update
cubasonapp
27 апр. 2026 г., 15:24
See comment below! new section part 4 is now available
leenguyen040812
27 апр. 2026 г., 00:45
Please recheck and update new part4, and new content today.
leenguyen040812
14 апр. 2026 г., 02:34
update, pls
leenguyen040812
7 апр. 2026 г., 09:39
please, upload part 4 canva
Alex
3 апр. 2026 г., 20:08
Josh, just added part 4 in the course
CourseHunter Team
23 мар. 2026 г., 18:17
Update:

NEW Part 3 Advanced Interactions
NEW Reference Animation Primer
leenguyen040812 CourseHunter Team
24 мар. 2026 г., 02:28
please also update Part 1: new
Evaluating Performance : Object Pooling

Please also re-checkting
anaxaim
19 мар. 2026 г., 13:46
вот эта прикольная подача, я хоть и бэкендер, но было интересно
sahilktempserve799
19 мар. 2026 г., 04:14
I have been wanting this course for a while, if u visit his original website how well optimized and fun and beautiful animation could be done, this course is finally i wish to explore this one.
jetit
17 мар. 2026 г., 13:47
update pls
leenguyen040812
17 мар. 2026 г., 09:50
Part III: Advanced Interactions new Part

https://courses.joshwcomeau.com/wham new update
leenguyen040812
17 мар. 2026 г., 09:46
please udpate new chapter
klichko
25 нояб. 2025 г., 11:27
Выложите похожий курс "Devouring details" от Rauno из Vercel
r00tgrizzly
4 окт. 2025 г., 22:09
Спасибо всем кто деньги собирал! Его курсы лучшее, что есть в индустрии
CourseHunter Team
29 сент. 2025 г., 22:32
Друзья, внимание!

Ранняя версия курса
Это предварительная версия. Новые модули и материалы будут добавляться автором до конца 2025 - начала 2026 года.

Особенности платформы
Из-за специфики платформы и формата подачи курса воспроизвести весь контент в полной динамике невозможно. Некоторые демонстрационные примеры анимаций могут не работать в локально сохранённых HTML-файлах. Однако у вас есть полный код примеров, пояснения и видео - этого достаточно для полноценного изучения при условии, что вы понимаете процесс.

Структура курса
Каждый урок - это HTML-страница, из которой сохранены все видео и архивы (ZIP с примерами кода).

Видео с приставкой MAIN - основные.

Видео с приставкой SAMPLE - демонстрации анимаций и дополнительных пояснений автора.

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

✨ Желаем приятного обучения!
CourseHunter Team CourseHunter Team
29 сент. 2025 г., 22:33
Friends, attention!

Early Course Version
This is an early release of the course. New modules and content will be added by the author until late 2025 - early 2026.

Platform Limitations
Due to the platform specifics and course format, it’s not possible to deliver the content in full interactivity. Some demo animations may not work in locally saved HTML files. However, you have access to the complete code examples, explanations, and videos - which is more than enough for effective learning if you follow the process.

Course Structure
Each lesson is an HTML page with all videos and ZIP archives (code examples) extracted.

Videos labeled MAIN are the primary lessons.

Videos labeled SAMPLE are additional demonstrations of animations or explanations for minor details.

How to follow the course
The online player includes only the MAIN videos. To complete the course, download the materials and follow the numbering sequence. If you see gaps between lesson numbers in the player, the missing parts are included in the downloaded files.

✨ Enjoy your learning journey!
CourseHunter Team
28 сент. 2025 г., 15:18
Сбор средств отменён. При активации региональных цен, сбор не требуется. Благодарим всех, кто был готов поддержать! Пожалуйста, ожидайте выхода курса в ближайшее время.

The fundraising has been cancelled. With regional pricing activated, we are ok to go alone with it. Thank you to everyone who was ready to contribute! Please stay tuned - the course will be available soon.
Rey
26 сент. 2025 г., 20:44
I don't think this course is worth purchasing since it's mostly interactive course. All of his courses are
ahmadnadeem509 Rey
26 сент. 2025 г., 21:36
They shared codesandbox urls for his other courses. So we can play ourself.
CourseHunter Team ahmadnadeem509
26 сент. 2025 г., 21:46
We? U don't have premium
oops
26 сент. 2025 г., 17:11
Thanks my friends. Great courses here on crowdunding. Just fyi I have seen there is a regional 60% discount. You can try Peru or other countries through vpn to get a price around 120usd. Thank you for the hard work 💪
CourseHunter Team oops
26 сент. 2025 г., 17:18
Hi! I couldn’t find any regional discounts there right now.
Marcus Aurelius CourseHunter Team
27 сент. 2025 г., 18:32
Yep, that's true, a regional license for $75 (Ultimate) is available from the Ukraine location, there is a checkbox under the Register now button, please check over.
LearnBabaji CourseHunter Team
26 сент. 2025 г., 17:51
In Bangladesh, it's on 75% discount and price is 75$.
CourseHunter Team LearnBabaji
26 сент. 2025 г., 18:03
Strange, we are using some vpn's and can't catch this. Anyway, let's first get enough people to start crowdfunding.
dasr43475 CourseHunter Team
27 сент. 2025 г., 16:32
Meownager which vpns are u using ?
Express VPN best
+ clear cache and cookies before entering the site after changing IP
dasr43475 dasr43475
27 сент. 2025 г., 16:33
Its only 75USD here 🙂
CourseHunter Team
26 сент. 2025 г., 16:54
Сейчас выходит столько классных курсов, что бюджета уже не хватает, а этот очень хочется. Доступ к ранней версии курса закроется уже через 3-4 дня, так что давайте соберёмся и быстро выкупим вместе 🙌

So many great courses are coming out right now that my budget can’t keep up, and I really want to take this one. Access to the early version of the course will close in just 3-4 days, so let’s team up and grab it quickly. 🙌
leenguyen040812 CourseHunter Team
16 мар. 2026 г., 09:30
please update new chapter
desalutar CourseHunter Team
26 сент. 2025 г., 18:46
Thank you for your work.