Создание плавных, производительных и красивых анимаций сложно. Framer Motion помогает преодолеть многие из этих трудностей. В этом курсе я проведу вас через все, что может предложить Framer Motion. Вместе мы рассмотрим все API Framer и создадим впечатляющие проекты из реального мира.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Урок 1.
00:02:17
001 - Introduction to the course
Урок 2.
00:04:20
002 - About the platform
Урок 3.
00:01:31
003 - Framer vs Framer Motion
Урок 4.
00:04:48
004 - Comparing Framer Motion With CSS Animation
Урок 5.
00:01:32
005 - Framer Motion's core principles
Урок 6.
00:03:27
006 - Installing Framer Motion
Урок 7.
00:04:11
007 - The Motion Component
Урок 8.
00:03:45
008 - Creating your first animation
Урок 9.
00:06:00
009 - Adding a from state to the animation
Урок 10.
00:09:36
010 - Changing the default transition
Урок 11.
00:08:04
011 - Make the animation loop with keyframes
Урок 12.
00:05:17
012 - Adding interactivity_ Hover, focus and tap
Урок 13.
00:03:15
013 - Build a responsive multi-step animation
Урок 14.
00:10:23
014 - Build a responsive multi-step animation
Урок 15.
00:08:27
015 - Motion values, the core of Framer Motion
Урок 16.
00:03:31
016 - Make it bounce_ useSpring
Урок 17.
00:04:14
017 - Transforming motion values with useTransform
Урок 18.
00:03:07
018 - Making elements draggable & practice with useTransform
Урок 19.
00:01:32
019 - Making elements draggable & practice with useTransform
Урок 20.
00:05:07
020 - Making elements draggable & practice with useTransform
Урок 21.
00:03:52
021 - Animating CSS variables (custom properties)
Урок 22.
00:02:29
022 - Stepping up our game
Урок 23.
00:06:34
023 - Animating elements removed from the DOM
Урок 24.
00:08:40
024 - Animation variants
Урок 25.
00:01:06
025 - Let's do a small refactor 0
Урок 26.
00:06:22
026 - Let's do a small refactor 1
Урок 27.
00:15:02
027 - Let's do a small refactor 2
Урок 28.
00:03:20
028 - Animating child components 0
Урок 29.
00:01:21
029 - Animating child components 1
Урок 30.
00:04:23
030 - Animating child components 2
Урок 31.
00:03:05
031 - Making your animations responsive
Урок 32.
00:18:25
032 - Responsiveness without media queries
Урок 33.
00:06:01
033 - Different behavior per breakpoint 0
Урок 34.
00:01:23
034 - Different behavior per breakpoint 1
Урок 35.
00:03:42
035 - Different behavior per breakpoint 2
Урок 36.
00:08:32
036 - Two other solutions to make responsive animations
Урок 37.
00:02:03
037 - Put our new skills to the test 0
Урок 38.
00:06:46
038 - Put our new skills to the test 1
Урок 39.
00:02:39
039 - Trigger animations on scroll 0
Урок 40.
00:00:20
040 - Trigger animations on scroll 1
Урок 41.
00:10:27
041 - whileInView 0
Урок 42.
00:01:38
042 - whileInView 1
Урок 43.
00:03:13
043 - whileInView 2
Урок 44.
00:03:17
044 - The useInView hook 0
Урок 45.
00:01:52
045 - The useInView hook 1
Урок 46.
00:04:07
046 - The useInView hook 2
Урок 47.
00:04:49
047 - Scroll-driven animations 0
Урок 48.
00:00:06
048 - Scroll-driven animations 1
Урок 49.
00:04:49
049 - useScroll_ Making scroll-driven animations 0
Урок 50.
00:03:44
050 - useScroll_ Making scroll-driven animations 1
Урок 51.
00:01:10
051 - useScroll_ Making scroll-driven animations 2
Урок 52.
00:10:31
052 - Tracking an element's position on screen
Урок 53.
00:01:47
053 - Practicing the differences between scroll-driven and scroll-triggered animations 0
Урок 54.
00:11:41
054 - Practicing the differences between scroll-driven and scroll-triggered animations 1
Урок 55.
00:09:06
055 - Scroll animations with position sticky 0
Урок 56.
00:00:20
056 - Scroll animations with position sticky 1
Урок 57.
00:02:19
057 - Scroll animations with position sticky 2
Урок 58.
00:06:07
058 - Scroll animations with position sticky 3
Урок 59.
00:03:38
059 - The most powerful feature of Framer Motion
Урок 60.
00:06:08
060 - Making your first layout animation 0
Урок 61.
00:05:14
061 - Making your first layout animation 1
Урок 62.
00:06:45
062 - Animating the impossible 0
Урок 63.
00:01:23
063 - Animating the impossible 1
Урок 64.
00:03:26
064 - Animating the impossible 2
Урок 65.
00:01:34
065 - Challenges in layout animations 0
Урок 66.
00:01:29
066 - Challenges in layout animations 1
Урок 67.
00:02:41
067 - Challenges in layout animations 2
Урок 68.
00:05:01
068 - Challenges in layout animations 3
Урок 69.
00:02:55
069 - Challenges in layout animations 4
Урок 70.
00:01:28
070 - Challenges in layout animations 5
Урок 71.
00:04:08
071 - Showing new elements 0
Урок 72.
00:07:25
072 - Showing new elements 1
Урок 73.
00:03:08
073 - Shared layout animations 0
Урок 74.
00:03:27
074 - Shared layout animations 1
Урок 75.
00:03:00
075 - Even more advanced shared layout animations 0
Урок 76.
00:10:50
076 - Even more advanced shared layout animations 1
Урок 77.
00:09:53
077 - Bonus - The alternative to position absolute 0
Урок 78.
00:03:36
078 - Bonus - The alternative to position absolute 1
Курс находится в процессе разработки, новые видео будут добавлены по мере их публикации автором.
Course in progress, new videos will be added as the author uploads them.
Автор - Jeroen Reumkens
Jeroen Reumkens
Я обожаю обучать вас ремеслу разработки интерфейсов. Я фронтенд-разработчик из Нидерландов, с более чем десятилетним профессиональным опытом в разработке интерфейсов. За время своей карьеры я работал во множестве как маленьких, так и крупных агентствах, а также познакомился с миром фриланса. За это время я создал множество вещей, начиная от приложений для Facebook (да, я настолько стар), до маркетинговых сайтов с супер сексуальными анимациями, сл
@admin
videos 35 and 36 are repeated. 36 video is missing
fix please :)
CourseHunter Team
Helcar
It's fixed. Sorry about that.
Anonymous
@admin please fix the vidoes. I have a good internet connection but video is not playable. Its just loading infinitely.
CourseHunter Team
Anonymous
try now please
Anonymous
CourseHunter Team
Its good now. Thanks very much.
dudecy
Please fix the video. It's not playing
CourseHunter Team
dudecy
what videos is not playing?
dudecy
please update
HY
@admin Please update this course. There are more lessons uploaded now
dudecy
please update
restoker
pls, update :D
antrix57
Thanks for this course. Any news on updates?
Anonymous
Please update
dudecy
PLEASE UPDATE COURSE
Albert
Hey, Please update this course. Thanks
Anonymous
Please update
obouchari
You really should just read the docs!
Isonow
Good stuff, thanks
idk
thank you
Cult
Thanks mates!
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Framer Motion - это популярная библиотека анимации для React. Она предлагает и декларативные, и императивные API, поэтому вы можете добавлять общие анимации всего лишь несколькими строками кода или перейти на более глубокий уровень и создавать настраиваемые эффекты. Она поддерживается компанией Framer, имеет активное сообщество и следует последним beweet практикам, используемым в экосистеме React.В этом курсе вы изучите Framer Motion с нуля, созд
Добро пожаловать в Продвинутая анимация React с Framer Motion! В этой серии мы погрузимся в более сложные концепции, а также обсудим, что нового во Framer Motion 2.
Ускоренная поездка в новую галактику творчества. Вы знакомы с HTML / CSS, но плохо знакомы с JavaScript или React? Этот курс специально для вас! Экономьте время! Изучайте только то, что важно.
Узнайте, как создавать анимации, которые вызывают эмоции у людей. Этот курс предназначен для тех, кто ценит мой стиль анимаций и/или кто стремится улучшить свои навыки. В курсе содержится все, что я знаю о движении в интернете. Вы узнаете, как создавать компоненты, и многое другие.
videos 35 and 36 are repeated. 36 video is missing
fix please :)