Framer Motion is an animation and gesture library that has had an incredible growth in popularity in the last year. Take a look at these downloads — one year ago and today:

npm download stats for the first week of October 2020

Given these numbers, familiarity with the library is a smart move. We’ll take a look at the quality of the docs, dive into some beginner and advanced examples, and finally wrap up with key points about how to use the library.

Contents

1\. Diving into the docs
2\. Animation stacking with the bouncy ball animation
3\. Scale on drag with the grow ball animation
4\. Color transition with color bouncer
5\. Key takeaways
6\. Resources (code and a video version of this article)

The Docs

There’s nothing more frustrating than hearing about a library that everyone’s using then feeling like you’re the only one struggling because you can’t make heads or tales of the documentation.

A screenshot of the Framer Motion API docs

In my opinion, and for my very visual learning style, the docs quickly gave me a sense of confidence that I could accomplish basic animations with Framer Motion.

The good

• API docs are easy to follow
• The nav tree on the left was easy to search and not overwhelming
• There were copious amounts of examples on the right, plus code sandboxes. This is exactly what a visual learner, like myself, needs.
• In the center were the explanations for the declarative API. I enjoyed the fact that examples and example code had more screen real estate than the textual definitions.
• The docs got into some technical aspects of animation performance with recommendations of which animations can be hardware accelerated — I was happily surprised to see this

#transitions #javascript #animation #programming #framer-motion