"Stay inside" sale! Use your time at home to learn something new - all courses are 50% off.

Animations with Framer-motion

Duration: 1:15:03 min
  • framer
  • react


Framer-motion is a great animation library that allows you to create animations in web application and inside Framer X using the same intuitive API. In this course we'll cover all the features that FM has to offer - from basic animations and layout transitions, to more complex imperative animations, working with gestures, and crafting low-level interactions.

What you'll learn

  • Create declarative animations
  • Work with gestures
  • Control all aspects of animations
  • Integrate with 3rd-party libs
  • Create low-level animations

Course resources

by Konstantin Lebedev

Founder & instructor at octocourses.com

Course videos

  1. Project structure and overview2:57
  2. Create basic animations8:46
  3. Customize look of animations with custom transitions7:23
  4. Animate layout changes with positionTransition2:50
  5. Create and orchestrate nested animations with variants7:53
  6. Animate unmounting components with AnimatePresence5:42
  7. Create dynamic variants using custom prop4:23
  8. Create imperative animations with useAnimation4:48
  9. Learn to use drag gestures8:21
  10. Animate hover and tap states with whileTap & whileHover1:01
  11. Learn to use pan gestures5:36
  12. Create low-level animations using motionValue5:06
  13. Make animations more accessible with useReducedMotion2:02
  14. Animate SVG elements4:09
  15. Animate custom React components4:06