An Intro to Framer Motion

An Intro to Framer Motion

Framer Motion is an animation and gesture library that has had an incredible growth in popularity in the last year.

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:

Image for post

Image for post

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.

Image for post

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Animated Counter Using JavaScript With HTML CSS | JavaScript Counter Animation

Download The File: https://drive.google.com/file/d/1faoYUjy4jmRntMAXZhoKZ-twtmytAtt5/view?usp=sharing Other PlayList: There is a complete playlist of JavaScr...

5 JavaScript Animations You’ll Want On Your Website

We gathered a list of some of the most visually interesting animation libraries that create a strong first impression on the page load.

Detect the End of CSS Animations and Transitions with JavaScript

In JavaScript, we can call the callback function once the animation is done. But in CSS, there is no option to perform any action after the end of the transition/animation. it's possible to detect the end of a CSS transition or ... Then bind the event with jQuery's one function, which ensures that it runs

How to Use Framer Motion to Add Animations and Page Transitions to a Next.js React App

Learn how to use Framer Motion to add animations and page transitions to your Next.js React app. We'll walk through setting up some basic animations when the page loads, some dynamic hover effects, and weird transitions for our Rick and Morty Wiki app.

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.