Buy PRO for €149

Course included in PRO (no subscription!)

Crafting Beautiful Experiences 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!

Read more about the course

The lessons

Unfinished modules will expand in number of lessons.
Use the lessons marked as "soon" as a guide of what the expect.

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 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. 12.1 Drag API