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

  1. Урок 1. 00:02:17
    001 - Introduction to the course
  2. Урок 2. 00:04:20
    002 - About the platform
  3. Урок 3. 00:01:31
    003 - Framer vs Framer Motion
  4. Урок 4. 00:04:48
    004 - Comparing Framer Motion With CSS Animation
  5. Урок 5. 00:01:32
    005 - Framer Motion's core principles
  6. Урок 6. 00:03:27
    006 - Installing Framer Motion
  7. Урок 7. 00:04:11
    007 - The Motion Component
  8. Урок 8. 00:03:45
    008 - Creating your first animation
  9. Урок 9. 00:06:00
    009 - Adding a from state to the animation
  10. Урок 10. 00:09:36
    010 - Changing the default transition
  11. Урок 11. 00:08:04
    011 - Make the animation loop with keyframes
  12. Урок 12. 00:05:17
    012 - Adding interactivity_ Hover, focus and tap
  13. Урок 13. 00:03:15
    013 - Build a responsive multi-step animation
  14. Урок 14. 00:10:23
    014 - Build a responsive multi-step animation
  15. Урок 15. 00:08:27
    015 - Motion values, the core of Framer Motion
  16. Урок 16. 00:03:31
    016 - Make it bounce_ useSpring
  17. Урок 17. 00:04:14
    017 - Transforming motion values with useTransform
  18. Урок 18. 00:03:07
    018 - Making elements draggable & practice with useTransform
  19. Урок 19. 00:01:32
    019 - Making elements draggable & practice with useTransform
  20. Урок 20. 00:05:07
    020 - Making elements draggable & practice with useTransform
  21. Урок 21. 00:03:52
    021 - Animating CSS variables (custom properties)
  22. Урок 22. 00:02:29
    022 - Stepping up our game
  23. Урок 23. 00:06:34
    023 - Animating elements removed from the DOM
  24. Урок 24. 00:08:40
    024 - Animation variants
  25. Урок 25. 00:01:06
    025 - Let's do a small refactor 0
  26. Урок 26. 00:06:22
    026 - Let's do a small refactor 1
  27. Урок 27. 00:15:02
    027 - Let's do a small refactor 2
  28. Урок 28. 00:03:20
    028 - Animating child components 0
  29. Урок 29. 00:01:21
    029 - Animating child components 1
  30. Урок 30. 00:04:23
    030 - Animating child components 2
  31. Урок 31. 00:03:05
    031 - Making your animations responsive
  32. Урок 32. 00:18:25
    032 - Responsiveness without media queries
  33. Урок 33. 00:06:01
    033 - Different behavior per breakpoint 0
  34. Урок 34. 00:01:23
    034 - Different behavior per breakpoint 1
  35. Урок 35. 00:03:42
    035 - Different behavior per breakpoint 2
  36. Урок 36. 00:08:32
    036 - Two other solutions to make responsive animations
  37. Урок 37. 00:02:03
    037 - Put our new skills to the test 0
  38. Урок 38. 00:06:46
    038 - Put our new skills to the test 1
  39. Урок 39. 00:02:39
    039 - Trigger animations on scroll 0
  40. Урок 40. 00:00:20
    040 - Trigger animations on scroll 1
  41. Урок 41. 00:10:27
    041 - whileInView 0
  42. Урок 42. 00:01:38
    042 - whileInView 1
  43. Урок 43. 00:03:13
    043 - whileInView 2
  44. Урок 44. 00:03:17
    044 - The useInView hook 0
  45. Урок 45. 00:01:52
    045 - The useInView hook 1
  46. Урок 46. 00:04:07
    046 - The useInView hook 2
  47. Урок 47. 00:04:49
    047 - Scroll-driven animations 0
  48. Урок 48. 00:00:06
    048 - Scroll-driven animations 1
  49. Урок 49. 00:04:49
    049 - useScroll_ Making scroll-driven animations 0
  50. Урок 50. 00:03:44
    050 - useScroll_ Making scroll-driven animations 1
  51. Урок 51. 00:01:10
    051 - useScroll_ Making scroll-driven animations 2
  52. Урок 52. 00:10:31
    052 - Tracking an element's position on screen
  53. Урок 53. 00:01:47
    053 - Practicing the differences between scroll-driven and scroll-triggered animations 0
  54. Урок 54. 00:11:41
    054 - Practicing the differences between scroll-driven and scroll-triggered animations 1
  55. Урок 55. 00:09:06
    055 - Scroll animations with position sticky 0
  56. Урок 56. 00:00:20
    056 - Scroll animations with position sticky 1
  57. Урок 57. 00:02:19
    057 - Scroll animations with position sticky 2
  58. Урок 58. 00:06:07
    058 - Scroll animations with position sticky 3
  59. Урок 59. 00:03:38
    059 - The most powerful feature of Framer Motion
  60. Урок 60. 00:06:08
    060 - Making your first layout animation 0
  61. Урок 61. 00:05:14
    061 - Making your first layout animation 1
  62. Урок 62. 00:06:45
    062 - Animating the impossible 0
  63. Урок 63. 00:01:23
    063 - Animating the impossible 1
  64. Урок 64. 00:03:26
    064 - Animating the impossible 2
  65. Урок 65. 00:01:34
    065 - Challenges in layout animations 0
  66. Урок 66. 00:01:29
    066 - Challenges in layout animations 1
  67. Урок 67. 00:02:41
    067 - Challenges in layout animations 2
  68. Урок 68. 00:05:01
    068 - Challenges in layout animations 3
  69. Урок 69. 00:02:55
    069 - Challenges in layout animations 4
  70. Урок 70. 00:01:28
    070 - Challenges in layout animations 5
  71. Урок 71. 00:04:08
    071 - Showing new elements 0
  72. Урок 72. 00:07:25
    072 - Showing new elements 1
  73. Урок 73. 00:03:08
    073 - Shared layout animations 0
  74. Урок 74. 00:03:27
    074 - Shared layout animations 1
  75. Урок 75. 00:03:00
    075 - Even more advanced shared layout animations 0
  76. Урок 76. 00:10:50
    076 - Even more advanced shared layout animations 1
  77. Урок 77. 00:09:53
    077 - Bonus - The alternative to position absolute 0
  78. Урок 78. 00:03:36
    078 - Bonus - The alternative to position absolute 1