Animating the web with Framer Motion

The right animations breathe life into web pages, while over-the-top ones can be a distraction. In this course, I will teach you the perfect balance, diving deep into the world of meaningful animations.

You'll learn not just to animate, but to enhance user experience gracefully. Your skills will not only slide to the next level – they'll animate there, bringing a touch of elegance and functionality to every project!

Learn more about the course first

Start learning

Please note that the curriculum is still under development. Unfinished modules will expand in number of lessons. Use the lessons shown as a guide of what the expect.

A short intro to the course, what to expect from it, what skills are needed before starting this course, and why would you even bother learning Framer Motion?

  1. 1.1 Introduction to the course
  2. 1.2 About the platform
  3. 1.3 Framer vs Framer Motion
  4. 1.4 Comparing Framer Motion With CSS Animations

Assuming you have zero knowledge of Framer Motion, I take you by the hand creating your first animation. Together we explore all basic APIs of Framer Motion. Concepts that might sound boring at first, but are an essential foundation towards building more complex animations.

  1. 2.1 Framer Motion's core principles
  2. 2.2 Installing Framer Motion
  3. 2.3 The Motion Component
  4. 2.4 Creating your first animation
  5. 2.5 Adding a from state to the animation
  6. 2.6 Changing the default transition
  7. 2.7 Make the animation loop with keyframes
  8. 2.8 Adding interactivity: Hover, focus and tap
  9. 2.9 Build a responsive multi-step animation

Some APIs are highly specific and would take too much out of the course's flow when discussed (in full) as part of a lesson. This module therefore combines any APIs that you might want to know more about, and gives you the guidance on where to find more information.

  1. 11.1 Drag API