Framer Motion's core principles

Lesson 1/9

Framer Motion's core principles

This free lesson is part of the Framer Motion course.

A lifetime subscription (€149 once) to Frontend.FYI PRO gives you instant access to all content.

This chapter is all about the basics and the core principles of Framer Motion.

When only looking at these core principles, you might be wondering why you would even use this rather than just making CSS animations. And you are right, for the majority of the animations we show in the next lessons, CSS animations would be a better choice.

However, it is very important that you understand these basic principles, before you can apply them to more complex animations — unlocking the real power of Framer Motion.

I know it’s tempting to skip the basics and build cool stuff straight away. But trust me, having proper knowledge of the basics is what enables you to make the cool stuff in the end!

What we’re working towards

At the end of the module we discussed all tools you need, to be able to recreate this animation from the course’s marketing page.

You know how to animate single properties of an element, make keyframe animations, tweak the transitions, and much more.

Time to get started.