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
    free
  2. 2.2 Installing Framer Motion
    preview
  3. 2.3 The Motion Component
    preview
  4. 2.4 Creating your first animation
    preview
  5. 2.5 Adding a from state to the animation
    preview
  6. 2.6 Changing the default transition
    preview
  7. 2.7 Make the animation loop with keyframes
    free
  8. 2.8 Adding interactivity: Hover, focus and tap
    preview
  9. 2.9 Build a multi-step animation
    preview

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
    soon